Angular中动态添加FormControl触发ngSubmit事件问题排查

核心问题：按钮默认类型触发表单提交 #

你遇到的ngSubmit意外触发问题，和动态添加FormControl的方式无关，根源在添加按钮的类型上：
HTML表单中，未指定type属性的<button>元素，默认会被识别为type="submit"。点击这类按钮时，浏览器会自动触发表单提交事件，也就是你绑定的(ngSubmit)="submit()"。

修复步骤 #

1. 给添加按钮指定类型
   给触发addProp()的按钮加上type="button"，明确它是普通操作按钮，不会触发表单提交：

   <button type="button" (click)="addProp()">添加属性</button>
   

2. 修正代码笔误
   你的TS代码里controlNames()方法引用了this.form.controls，但实际表单实例是this.entityTypeForm，这会导致运行报错，需要修正：

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

关于动态添加FormControl的合理性 #

你通过FormGroup.addControl()动态添加控件的逻辑是正确的，配合*ngFor遍历控件名生成输入框的写法也没问题，修正上述两个点后，就能解决意外提交的问题。

内容的提问来源于stack exchange，提问作者UmbrellaCorpAgent