Angular conditional validations

Question

I am using mat form field in my angular form and my code for one of my attribute is as follows.

<mat-form-field appearance="fill">
  <mat-label>CountryCode</mat-label>
  <input formControlName="CountryCode" matInput (click)='updateFormTextValue("alphanumericNext", "CountryCode")'>
  </mat-error>
</mat-form-field>

I want to add validation for this field such that if the country is Canada, I want to do Validators.required and Validators.maxLength(30) and if country is other than Canada I just need to check the max length. How can I do that?

My code in service class is as follows

CountryCode: new FormControl('', [Validators.required, Validators.maxLength(30)]),

I am able to use validators provided by angular as my code above but don't know how to put validation as per conditions. I saw some examples on StackOverflow but didn't get how to do it.

PS: country for which I need to put check is one of the fields in my form and its code is same as CountryCode as mentioned above. Please help

Also, need to show the message that if the max length exceeds then message "maximum length exceeded should be shown" and if the field is empty and if the country is Canada then the message "field is required is shown"

you can use custom validators alligator.io/angular/reactive-forms-custom-validator — Barkha
– Barkha, Commented Sep 27, 2019 at 14:15

Sarjerao Ghadage · Accepted Answer · 2019-09-27 14:18:45Z

0

Based on country selection update validators let's assume you select country as "India" selectedCountry="India"

  if(selectedCountry===India'){
    this.myForm.controls.get('CountryCode').setValidators([Validators.required, 
                                              Validators.maxLength(5)]);
}else{
 this.myForm.controls.get('CountryCode').setValidators([Validators.required, 
                                              Validators.maxLength(4)]);
}

you can replace maxLength(4) with your country character length.

answered Sep 27, 2019 at 14:18

Sarjerao Ghadage

1,55616 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user11980874 Over a year ago

do I need to add this to my component? DO I need to change anything in my html code or service code which contains formgroup and validators?

Adrita Sharma · Accepted Answer · 2019-09-27 14:24:08Z

0

You have to create a custom validator.

Something like this:

CountryCode: new FormControl('', [CountryCodeValidator('Canada')]),

function CountryCodeValidator(countryName: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    if (countryName == "Canada") {
      if (control.value.length >= 30) {
        return null
      } else {
        return { 'CountryCode': true };
      }
    } else {
      return null
    }
  };
}

4 Comments

user11980874 Over a year ago

where do I need to add this code. in my component or in service class where I have defined formgroup and added vlaidations?

user11980874 Over a year ago

also how I can get required messages?

Adrita Sharma Over a year ago

Check the modified answer, if it is not valid, you can display a messageby keeping it in a block with *ngIf

user11980874 Over a year ago

I understood your code. But not getting how to display required message conditionally using *ngIf. could you please give example?

Collectives™ on Stack Overflow

Angular conditional validations

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related