Angular中ngFor动态生成输入框的验证及ngIf写法问题

你代码里的核心错误是在模板引用变量的ngIf判断中使用了插值语法——模板引用变量在*ngFor的每一个循环作用域里都是独立的，不需要通过{{i}}来区分。

修正后的基础版代码 #

直接去掉模板引用变量后的索引后缀，就能正常触发必填验证：

<div *ngFor="let test of testModel; index as i">
    <input [(ngModel)]="test.key" 
           name="inputTest{{i}}" 
           required="true"
           id="inputTest{{i}}" 
           #inputTest="ngModel" /> <!-- 移除{{i}} -->

    <p *ngIf="inputTest.errors?.required"> <!-- 直接使用inputTest变量 -->
        此字段为必填项！
    </p>
</div>

为什么这样可行？ #

*ngFor的每一次迭代都会创建一个独立的模板作用域，每个<input>对应的#inputTest变量只在当前循环项的范围内生效，不会和其他循环项的变量产生冲突。另外你已经通过name="inputTest{{i}}"设置了唯一的name属性，这是Angular跟踪表单控件状态的关键，这点做得没问题。

复杂场景：用FormArray管理动态表单 #

如果需要更灵活的验证逻辑（比如自定义验证器、动态添加/删除输入框），推荐使用Angular的FormArray来管理：

组件类代码

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-inputs',
  templateUrl: './dynamic-inputs.component.html'
})
export class DynamicInputsComponent {
  dynamicForm: FormGroup;

  // 快捷获取FormArray控件
  get testControls(): FormArray {
    return this.dynamicForm.get('tests') as FormArray;
  }

  constructor(private fb: FormBuilder) {
    // 初始化表单，包含一个空的FormArray
    this.dynamicForm = this.fb.group({
      tests: this.fb.array([
        this.fb.control('', Validators.required) // 初始输入框
      ])
    });
  }

  // 动态添加输入框
  addNewInput() {
    this.testControls.push(this.fb.control('', Validators.required));
  }

  // 提交表单
  onSubmit() {
    if (this.dynamicForm.valid) {
      console.log('表单数据：', this.dynamicForm.value);
    }
  }
}

模板代码

<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <div *ngFor="let control of testControls.controls; index as i">
    <input [formControl]="control" 
           name="inputTest{{i}}" 
           placeholder="请输入内容" />

    <p *ngIf="control.invalid && control.touched">
      此字段为必填项！
    </p>
  </div>

  <button type="button" (click)="addNewInput()">添加输入框</button>
  <button type="submit" [disabled]="dynamicForm.invalid">提交</button>
</form>

这种方式能更精准地控制每个输入框的验证状态，还能轻松实现动态增减输入框的功能，适合复杂的业务场景。

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