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,

Naren Murali · Accepted Answer · 2025-01-16 13:31:32Z

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

answered Jan 16 at 13:31

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prabir Choudhury Jan 16 at 18:16

that did the trick! @NarenMurali . Silly me I overlooked the button type="submit" part.

Edward Newsome · Accepted Answer · 2025-01-16 13:59:12Z

0

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.

answered Jan 16 at 13:59

Edward Newsome

7987 silver badges16 bronze badges

1 Comment

Prabir Choudhury Jan 16 at 18:14

Yes, I agree there are ways to clean up the code and make it more 'Angular'-esque. Like creating a separate component for the modal @EdwardNewsome. Even rendering of the modal can be improved by using renderer2. But the biggest thing I overlooked was setting button type="submit" instead of type="button" as NarenMurali pointed out. Silly me! How did I overlook that one!

Collectives™ on Stack Overflow

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

2 Answers 2

Stackblitz Demo

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related