在Angular中遇到验证错误消息的问题

Question

我在验证中遇到错误消息的麻烦。我希望能够区分不同信息的不同错误。我怎样才能解决这个问题。下面是我的typescript函数:

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映射中可用。您可以使用*ngIf="xmlForm.get(form.name).errors?.required"

执行类似的检查。