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

Question

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,

Answer 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