Submit event of Angular Reactive Form inside modal bootstrap not working - - Stack Overflow

I have a basic angular reactive form inside a modal bootstrap popup which is simply not submitting. ie the angular ngSubmit event is not getting triggered! Please take a look at this stackblitz where I have simulated it:

Just fill in some data and try to submit the form. I have put an alert dialog inside the onSubmit() method to check if it gets called at all on form submit. Nope, doesn't work.

Currently it is giving two console errors, which is strange too, because I have bound the reactive form properties with respective input controls using formControlName.

Cannot find control with name: 'name'
Cannot find control with name: 'city'

Can you tell me what is wrong with my stackblitz attempt. What exactly did I miss?

Thanks,

I have a basic angular reactive form inside a modal bootstrap popup which is simply not submitting. ie the angular ngSubmit event is not getting triggered! Please take a look at this stackblitz where I have simulated it:

https://stackblitz.com/edit/stackblitz-starters-xmhsxaez

Just fill in some data and try to submit the form. I have put an alert dialog inside the onSubmit() method to check if it gets called at all on form submit. Nope, doesn't work.

Currently it is giving two console errors, which is strange too, because I have bound the reactive form properties with respective input controls using formControlName.

Cannot find control with name: 'name'
Cannot find control with name: 'city'

Can you tell me what is wrong with my stackblitz attempt. What exactly did I miss?

Thanks,

• angular
• bootstrap-modal
• angular-reactive-forms
• angular19

Share Improve this question Follow asked Jan 16 at 13:09 Prabir ChoudhuryPrabir Choudhury 33555 silver badges2222 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You need to initialize the form on the ngOnInit hook, then it will start working.

ngOnInit(): void {
  this.setFormState();
}

Then you can change the button to submit the form to type="submit".

      <button type="submit" data-bs-dismiss="modal" class="btn btn-primary">
        Save Changes
      </button>

Stackblitz Demo

Move this.setFormState(); from the closeModal() method to the openModal() method.

There are cleaner ways of doing this like having the modal being its component so it can have its own lifecycle and Output the value of the form back to your parent component when its closed.