Having trouble with validation error messages in Angular

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"