Angular Dynamic Form Validations - Either or custom validation

user_630209 0
Viewed 92

I need to write a custom validation,

  1. If nationality is 1 then passport is mandatory - this had done.
  2. If nationality is 2 then either civilId or passport number is mandatory - needed solution for this

Point 2 how can i achieve.

So that error message should display in html like this

<span *ngIf="form.get('passportNo').errors" class="tooltiptext">{{' passportNo is required'}}</span>

this.form = this.fb.group({
      civilId: [""],
      nationality: [""]
      passportNo: [""],

})

  setExpatValidators() {
    const passportNo = this.form.get('passportNo');
    this.form.get('nationality').valueChanges
    .subscribe(nationality => {
          if(nationality ==  1){
        passportNo.setValidators([Validators.required]);
      }
  });
 }

submitForm(){
 if (!this.form.valid) {
 return;
}

Suggest if there any other way

angular8 typescript javascript
1 Answers

You can add a custom validator for your form group:

ngOnInit() {
  this.form = this.fb.group({
    civilId: [""],
    nationality: [""],
    passportNo: [""]
  });
  this.form.setValidators(this.formValidator());
}

formValidator(): ValidatorFn {
  return (group: FormGroup): ValidationErrors => {
    const nationality = group.controls.nationality;
    const passportNo = group.controls.passportNo;
    const civilId = group.controls.civilId;
    let errors = null;

    if (nationality.value === 1 && !passportNo.value) {
      errors = { passportNoRequired: true };
    }
    if (nationality.value === 2 && !passportNo.value && !civilId.value) {
      errors = { passportNoOrCivilIdRequired: true };
    }
    return errors;
  };
}

And validate again your form:

<span *ngIf="form.errors && form.errors.passportNoOrCivilIdRequired" class="tooltiptext">passportNo or Civil Id is required</span>

Working Demo

https://stackblitz.com/edit/form-validations-ng?file=src%2Fapp%2Fform1%2Fform1.component.ts

user_123645580
Related