Angular 中的驗證錯誤消息有問題

Question

我在驗證時遇到錯誤消息。 我希望能夠區分不同消息的不同錯誤。 我怎樣才能解決這個問題。 這是我的 typescript function：

 createFormControl(){
    this.updatedArray.forEach((element: any) => {
      element.maxlength = +element.maxlength
      if(element.required === "true"){
        this.xmlForm.addControl(element.name, new FormControl('',[Validators.required, Validators.maxLength(element.maxlength)])); 
      }else{
        this.xmlForm.addControl(element.name, new FormControl('')); 
      }
      
      
    });
    console.log(this.xmlForm)

  }

這是我的 HTML 的一部分的示例：

<div class="row pb-2" [formGroup]="xmlForm">
        <div class="col-lg-4" *ngFor="let form of updatedArray">
            <div class="form-group" [ngSwitch]="form.type">
                <div *ngSwitchCase="'string'">
                    <label _ngcontent-emf-c46="" for="input1">{{form.name}}</label>
                    <input _ngcontent-emf-c46="" type="text" [formControlName]="form.name" placeholder="" id="input1" aria-describedby="Text field"
                        name="name" class="form-control ng-untouched ng-pristine ng-valid" ng-reflect-name="name"
                        ng-reflect-model="">
                        <div  *ngIf="xmlForm.get(form.name).dirty || xmlForm.get(form.name).touched">
                            <small class="error" *ngIf="!xmlForm.get(form.name).valid">
                                {{form.name}} is Required
                            </small>
                        </div>
                        <div  *ngIf="xmlForm.get(form.name).dirty">
                            <small class="error" *ngIf="!xmlForm.get(form.name).valid">
                                Max Length is {{form.maxlength}}
                            </small>
                        </div>
                </div>

當其中一個為真時，兩個錯誤消息都會彈出。 我只想要一個出現。 我怎樣才能解決這個問題？

Answer 1

而不是*ngIf=".xmlForm.get(form.name).valid"來檢查最大長度合規性，您應該嘗試*ngIf="xmlForm.get(form.name).errors?.maxlength" 。 根據Angular API ，如果超過指定的最大長度，則maxlength屬性在errors map 中可用。 您可以使用*ngIf="xmlForm.get(form.name).errors?.required"對 required 進行類似的檢查