Having trouble with validation error messages in Angular - html

Question

I am having trouble with error messages in my validation. I want to be able to differentiate between the different errors with different messages. How can I fix this. Here is my 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)
}
Here is and example of a part of my 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>
Both error messages are popping up when one or the other is true. I just want one showing up. How can I fix this?

Answer 1

Instead of *ngIf="!xmlForm.get(form.name).valid" to check for max length compliance, you should try *ngIf="xmlForm.get(form.name).errors?.maxlength". According to the Angular API, the maxlength property becomes available in the errors map if the specified max length is exceeded. You can do a similar check for required using *ngIf="xmlForm.get(form.name).errors?.required"