Angular响应式表单动态字段提交验证异常求助

问题说明 #

我使用Angular响应式表单实现了带动态productname字段的功能，已设置提交时未填写产品名称则抛出验证错误。但点击「Add」按钮新增输入控件（formControlName="productname"）时，每个新控件都会立刻显示「Enter Product Name」的错误提示，不符合预期。

原因分析 #

当前错误提示仅判断了控件的invalid状态，新增控件初始值为空，默认处于invalid状态，因此一添加就触发错误显示。需要结合表单提交状态或控件交互状态，限制错误提示的触发时机。

解决方案 #

方法1：仅在表单提交后显示错误 #

修改模板中的错误提示条件，增加表单提交状态判断，只有表单被提交过且控件无效时才显示错误：

<div *ngIf="product.get('productname')?.invalid && form.submitted" class="error">
  Enter Product Name
</div>

注：form需对应组件中定义的FormGroup实例变量。

方法2：提交时全局验证 + 交互后显示单控件错误 #

如果希望用户点击过控件后也能显示错误，同时保留提交时的全局验证，可结合控件的touched状态：

<div *ngIf="product.get('productname')?.invalid && (form.submitted || product.get('productname')?.touched)" class="error">
  Enter Product Name
</div>

这样既保证提交时所有未填控件都报错，也避免新增控件立刻弹出提示，只有用户和控件交互后才触发错误显示。

组件侧初始化注意事项 #

新增控件时确保正确初始化表单控件，保留必填验证逻辑（不影响提交时的验证）：

addProduct() {
  const products = this.form.get('products') as FormArray;
  products.push(
    new FormGroup({
      productname: new FormControl('', Validators.required)
    })
  );
}

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