角度动态场的错误消息答案

【问题标题】：Error message for dynamic field in angular角度动态场的错误消息
【发布时间】：2022-12-06 13:31:03
【问题描述】：

我有一个简单的角度反应形式，使用 formArray 的动态场发生器概念。对于动态字段，我得到的错误状态完全是 INVALID，但没有得到错误中的错误，因此无法显示错误消息。任何人都可以帮我展示它们吗？对于普通字段，我得到了错误，实际上它在浏览器中正确显示。

文件：

import { Component, OnInit } from '@angular/core';
import {FormGroup,FormBuilder,FormArray, Validators} from '@angular/forms'
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
   regForm!:FormGroup;
  constructor(private fB:FormBuilder) { }

  ngOnInit(): void {
    this.regForm=this.fB.group({
      fname:['',[Validators.required,Validators.maxLength(4)]],
      mail:[''],
      pwd:[''],
      altMail:this.fB.array([])
   });
  }

  get altMail()
  {
    return this.regForm.get('altMail') as FormArray;
  }
  
  addNewMail()
  {
     this.altMail.push(this.fB.control('',[Validators.required,Validators.minLength(10)]))
  }

  removeMail(i:number)
  {
    this.altMail.removeAt(i)
  }
  regDataSubmit()
  {
    // alert("Data submitted successfully");
    console.log(this.regForm.controls);
     console.log(this.regForm.value);
  }

}

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>
        <div *ngIf="regForm.get('i')?.touched">
            <div *ngIf="regForm.get('i')?.hasError('required')">required</div>
            <div *ngIf="regForm.get('i')?.hasError('minlength')">minlength 5</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" >

</form>

【问题讨论】：

标签： angular dynamic error-handling angular-reactive-forms

【解决方案1】：

您应该从altMailFormArray而不是regFormFormGroup（root）获取表单控件。

altMail.get(i.toString())

<div *ngIf="altMail.get(i.toString())?.touched">
  <div *ngIf="altMail.get(i.toString())?.hasError('required')">
    required
  </div>
  <div *ngIf="altMail.get(i.toString())?.hasError('minlength')">
    minlength 5
  </div>
</div>

Demo @ StackBlitz

【讨论】：