Angular响应式表单：FormArray中控件的错误消息显示问题

你的问题核心在于FormArray中控件的错误判断逻辑错误：模板里使用regForm.get('i')时，'i'是字符串字面量，并非循环中的索引变量i，导致Angular无法定位到对应的表单控件，自然无法读取错误信息并展示提示。

修正方案 #

直接通过循环中的input变量（或FormArray的索引）获取对应表单控件，替换错误的控件获取方式：

修正后的HTML代码

<form [formGroup]="regForm" (ngSubmit)="regDataSubmit()">

    <label for="fname">Firstname: </label>
    <input type="text" name="fname" id="fname" formControlName="fname"><br><br>
    <div *ngIf="regForm.get('fname')?.touched">
        <div *ngIf="regForm.get('fname')?.hasError('required')">required</div>
        <div *ngIf="regForm.get('fname')?.hasError('maxlength')">maxlength 4</div>
    </div> 

    <label for="mail">Email: </label>
    <input type="email" name="mail" id="mail" formControlName="mail"><br><br>

    <button (click)="addNewMail()">Add new Email</button><br><br>

    <div formArrayName="altMail" *ngFor="let input of altMail.controls;let i=index">
        <br>
        <input type="email" [formControlName]="i">&nbsp;&nbsp;
        <button (click)="removeMail(i)"> Remove </button>
        <!-- 直接使用循环的input变量获取控件状态与错误 -->
        <div *ngIf="input.touched">
            <div *ngIf="input.hasError('required')">required</div>
            <!-- 同步TS中的校验规则：Validators.minLength(10)，修正原模板中5的错误 -->
            <div *ngIf="input.hasError('minlength')">minlength 10</div>
        </div>
    </div>
    <br><br>


    <label for="pwd">Password: </label>
    <input type="password" name="pwd" id="pwd" formControlName="pwd"><br><br>

    <input type="submit" value="Register" [disabled]="!regForm.valid">

</form>

额外说明 #

1. 循环中的input变量就是当前的FormControl实例，直接调用touched和hasError()方法即可，无需通过regForm.get()重复获取。
2. 同步了校验规则与提示文本：TS中设置的是minLength(10)，修正了原模板中minlength 5的不一致问题。
3. 给提交按钮添加了[disabled]="!regForm.valid"，防止用户提交无效表单，优化交互体验。

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