0

I'm trying to implement modal forms in my project.

In the link, If I click first button (Hello2), type something in input and then close modal. When I click first button again everything stays as is in the first time (because modal page not initialized). If I click on the second button (ngOnInit Sample) everything works as I expected.

But if you check app.component.html in the second sample nearly most of the code is written in app.component.html. I want to use like in the first sample (<hello2 #hello2Comp name="{{ name }}"></hello2>) but expecting to work like second sample. Re init my form in every open/show form.

Enes Köroğlu
  • 184
  • 5
  • 15

1 Answers1

1

In the Hello2 model on close button click you are removing only modal-body and so input1Modelstill hold the input you have provided and so it is rendering whenever you are rendering modal body.

But in other case every time HelloComponent is initializing and so input1Model in HelloComponent is also getting initialized.

So if you want to reset in Hello2Component just reset that variable in hideModal() method as this.input1Model = null. In case of form, you can call form initialization block.

Other Approach(as mentioned in comment) Edited_link

Gopu.S
  • 32
  • 6
  • I want to initialize `Hello2Component` like `HelloComponent`.I'm not trying to set one input. I have so many input, dropdown, etc. on my form and it is not possible to set all of them to null and setting the value is not enough. As a side effect `form`'s `validation state`'s does not initialize, so I want to `initiliazie` `Hello2Component`. – Enes Köroğlu Jun 01 '18 at 10:56
  • You can remove and render the Hello2Component by throw back the closeEvent and use ngAfterViewChecked life hook to show modal. Adding the code in above response – Gopu.S Jun 02 '18 at 07:31
  • Yes, that's it. Thank you – Enes Köroğlu Jun 05 '18 at 08:43