Angular Dynami c Проверка форм - либо проверка, либо настраиваемая

Question

Мне нужно написать таможенную проверку,

1. Если национальность 1, то паспорт является обязательным - это было сделано.
2. Если национальность 2, то либо civilId, либо номер паспорта обязательный - необходимое решение для этого

Пункт 2, как я могу достичь.

Таким образом, это сообщение об ошибке должно отображаться в html как это

<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;
}

Подскажите, есть ли другой способ

Answer 1

Вы можете добавить настраиваемый валидатор для своей группы форм:

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;
  };
}

И еще раз подтвердить свою форму:

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

Рабочая демонстрация

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