Angular adding a FormControl dynamically triggers the ngSubmit event

Question

I have a form in which I dynamically add some FormControl as the user adds elements. There's only one problem. Adding a FormControl will trigger the ngSubmit event, even though it should not be the behaviour I'm looking for.

Here's the relevant code :

public entityTypeForm: FormGroup;

constructor(private fb: FormBuilder) {

}

ngOnInit(): void {
    this.fcName = new FormControl('', [Validators.required, Validators.maxLength(50)]);
    this.entityTypeForm = this.fb.group({
      name: this.fcName
    });
}

addProp() {
  let key = uuid.v4();
  let prop: EntityTypeProperty = {
    key: key,
    name: "Some prop name"
  };
  let fc = new FormControl(prop.name, [Validators.required, Validators.maxLength(50)]);
  this.entityTypeForm.addControl(prop.key, fc);
}

controlNames(): string[] {
  return Object.keys(this.form.controls);
}

submit() {
  this.entityTypeForm.markAsPristine();
  this.entityTypeForm.markAsUntouched();
}

And HTML :

<form [formGroup]="entityTypeForm" (ngSubmit)="submit()">

    <input
      *ngFor="let name of controlNames()"
      type="text"
      [formControlName]="name">

    <button (click)="addProp()"></button>
    <button type="submit"></button>

</form>

Is there anything wrong with the way I add the FormControls that would create this weird behaviour?

You tried `this.entityTypeForm.addControl(prop.key, fc, {emitEvent: false});`? It seems to be the only optional parameter: https://angular.io/api/forms/FormGroup#addcontrol — Chris Hamilton, Oct 21 '22 at 00:46
Well to be honest I did not try because default value is undefined, thus javascript basically treats it as false. But I did my due diligences and tried it when you suggest, with false or true value I got the same result unfortunately. — UmbrellaCorpAgent, Oct 21 '22 at 02:20
Parameters can have default values when you pass undefined, in this case the default value is true FYI — Chris Hamilton, Oct 21 '22 at 02:24
Did a quick test, not getting any resetting behaviour. See if you can add to this example to reproduce: https://stackblitz.com/edit/angular-ivy-uhvccv?file=src/app/app.component.ts — Chris Hamilton, Oct 21 '22 at 02:41
Indeed the code you sent has the correct behaviour. For some reasons that must be unrelated to the FormControls though, my code does reset, so this has to be a side effect of something else more or less related then. Thank you. — UmbrellaCorpAgent, Oct 21 '22 at 03:14
@ChrisHamilton I investigated more and found out that the problem is for some reason when I add a FormControl, the ngSubmit event gets triggered. When this gets triggered, I call a function that updates the entity that I used to determine the nature of the FormControls. After updating, I mark the form as pristine and untouched. Here I found the reason : https://stackoverflow.com/questions/40968069/ngsubmit-is-called-when-press-click-button Thanks though, was really useful figuring out the problem. — UmbrellaCorpAgent, Oct 21 '22 at 19:12
Huh, didn't know the default button type is submit. What a weird design decision lol guess it goes back to the early days of the web — Chris Hamilton, Oct 22 '22 at 15:20

score 0 · Accepted Answer · answered Oct 22 '22 at 12:38

0

Buttons inside a form have type="submit" by default. Adding type="button" to the button that calls addProp() fixes the problem, as seen in this post : (ngSubmit) is called when press (click) button

answered Oct 22 '22 at 12:38

UmbrellaCorpAgent

548
1
5
17

Angular adding a FormControl dynamically triggers the ngSubmit event

1 Answers1