时间戳

首页 > 解决方案 > 在 Angular 中遇到验证错误消息时遇到问题

html - 在 Angular 中遇到验证错误消息时遇到问题

问题描述

我在验证时遇到错误消息。我希望能够区分不同消息的不同错误。我怎样才能解决这个问题。这是我的打字稿功能：

 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>

当其中一个为真时，两个错误消息都会弹出。我只想要一个出现。我怎样才能解决这个问题？

标签： htmlangulartypescript

解决方案

而不是*ngIf="!xmlForm.get(form.name).valid"检查最大长度合规性，您应该尝试*ngIf="xmlForm.get(form.name).errors?.maxlength". 根据Angular API，如果超过指定的最大长度，则该maxlength属性在地图中可用。errors您可以使用所需的类似检查*ngIf="xmlForm.get(form.name).errors?.required"

推荐阅读