What is the best practice to show Reactive Form Error Message without multiple *ngIf?

Question

I am developing job form which contains job related fields and some of the fields have more than 5 validation.

Here is my Html Code:

相关标签:

Answer 1

Someone has answered this question and my issue was resolved with the provided answer. But that has been removed, I don't know why.

I have used @rxweb/reactive-form-validators for showing error message without *ngIf.

I have used 'RxFormBuilder' to create a FormGroup object and used errorMessage property of FormControl. Below is the TS code which I have downloaded form the provided answer:

export class AppComponent  {

  userFormGroup:FormGroup;

 

  constructor(private formBuilder:RxFormBuilder){}

 

 

  ngOnInit(){

  //this is used for to configure validation message globally. https://www.rxweb.io/api/reactive-form-config

    ReactiveFormConfig.set({

     "validationMessage":{

    "required":"This field is required",

      "minLength":"minimum length is {{0}}",

      "maxLength":"allowed max length is {{0}}"

      }

    });

 

    this.userFormGroup = this.formBuilder.group({

     userName:['',[RxwebValidators.required(),RxwebValidators.minLength({value:5}),RxwebValidators.maxLength({value:10})]]

    })

  }

Html Code :

<form [formGroup]="userFormGroup">

<div class="form-group">

    <label>UserName</label>

    <input type="text" formControlName="userName" class="form-control"  />

    {{userFormGroup.controls.userName["errorMessage"]}}

 

</div>

</form>