Angular嵌套响应式表单：添加表单数组时触发markAsTouched问题

先修正代码中的笔误 #

你的代码里存在几处变量名不匹配的问题，这会导致表单逻辑异常：

1. TypeScript组件中的笔误：
   clientForm getter里错误引用了不存在的adviserForm，应该改为mainForm：

   get clientForm() {
     return this.mainForm.get('clients') as FormArray;
   }
   

2. HTML模板中的笔误：
   • 姓名输入框的formControlName是adviser_name，但TS中表单定义的是name，需改为name；
   • 验证逻辑里的adviserForm要改为mainForm：

   <input
     [ngClass]="{
       'invalid-input':
         mainForm.get('name')?.invalid &&
         mainForm.get('name')?.touched
     }"
     formControlName="name"
     placeholder="adviser name"
   />
   

核心问题解决：阻止按钮触发表单提交 #

点击「Add Client」时新控件被标记为touched的根本原因是：form标签内的按钮默认type为submit，点击时会触发表单的ngSubmit事件，执行你写的submit()方法，而该方法里的this.mainForm.markAsAllTouched()会把所有表单控件（包括刚添加的）都标记为touched。

解决方法很简单，给「Add Client」和「Delete Client」按钮显式设置type="button"，避免触发表单提交：

<button type="button" (click)="deleteClient(i)">Delete Client</button>
<!-- 下方的Add Client按钮同样修改 -->
<button type="button" (click)="addClient()">Add Client</button>

这样修改后，点击添加/删除按钮只会执行对应的方法，不会触发表单提交和全量标记touched，新添加的控件会保持默认的untouched状态，只有当用户实际点击输入框后才会变为touched，符合你的验证反馈逻辑。

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