Проверка в реальном времени не выполняется, когда условие выполнено angular 9

Question

Я использую установленное условие валидатора, как только оно действительно, удовлетворено, его форма не стала действительной.

 public phoneNumberTypes: any[] = [
        { number: 'Mobile' },
        { number: 'Home' },
        { number: 'Work' }
    ];

На основе выбранного выпадающего изменения я применяю установленные валидаторы в реактивной форме.

      pDetailsForm = this.formBuilder.group({
            firstName: new FormControl('', [Validators.minLength(0), Validators.maxLength(49), Validators.pattern('^[a-zA-Z]*$')]),
            lastName: new FormControl('', [Validators.required, Validators.maxLength(49), Validators.pattern('^[a-zA-Z]*$')]),
      phoneNumber: new FormControl('', []), phoneNumberTypes: new FormControl(this.phoneNumberTypes[0].number, []),});

   }


       public onphoneNumberChange(value:string):void{
            this.selectedNetworkType=value;
          if(value === 'Mobile' || value === 'Home'|| value === 'Work'){
            this.personalDetailsForm.get('phoneNumber').setValidators(Validators.required);

          }else{
            this.personalDetailsForm.get('phoneNumber').clearValidators();
          }
          this.personalDetailsForm.get('phoneNumber').updateValueAndValidity()
        }

  <div class=" form-group col-md-8">
                            <label> &nbsp;</label>
                            <input type="text"
                                   class="form-control"
                                   id="phoneNumber"
                                   placeholder=""
                                   form-control="phoneNumber">
                        </div>
                       g {pDetailsForm.get('phoneNumber').hasError('required')}}
                    </div>

<div class="form-group col-md-4  pr-4 pl-4">
                    <label for="pNo">phonenumber</label>
                    <select id="phoneNumber"
                            class="form-control"
                            formControlName="phoneNumberTypes"
                            #phoneNumber
                            (change)='onphoneNumberChange(phoneNumber.value)'>
                        <option value=""
                                disabled>select</option>
                        <option *ngFor="let numberType of phoneNumberTypes">
                            {{ numberType.number }}
                        </option>
                    </select>
                    <div class="text-danger"
                         *ngIf="submitted && pDetailsForm.controls.phoneNumberTypes.hasError('required')">
                        error
                    </div>
                </div>

Я заполнил поле номера телефона, но условие не выполнено. Форма действительна.

Answer 1

Вы хотите динамически установить требуемый контроль реактивных форм. Для этого я бы создал собственный валидатор, а не пытался управлять списком валидаторов, прикрепленных к элементу управления.

Во-первых, чтобы упростить ссылки на элементы управления, я собираюсь объявить их отдельно.

controls: {
  phoneNumber: FormControl;
  type: FormControl;
};
form: FormGroup;
types = [
  'Mobile',
  'Home',
  'Work'
];  

Я собираюсь объявить мой собственный ValidatorFn, в который введен другой элемент управления. Валидатор будет возвращать ошибки валидации только в том случае, если введенный элемент управления имеет значение, а текущий элемент управления - нет.

private requiredIf(target: AbstractControl, other: AbstractControl): ValidatorFn {
  other.valueChanges.subscribe(value => {
    target.updateValueAndValidity();
  });

  return (control: AbstractControl) => {
    return !other.value || control.value ? null : {
      required: 'true'
    };
  };
}

Затем я установлю элементы управления в ngOnInit(). Я должен установить валидаторы после того, как элементы управления были созданы, чтобы я мог использовать ссылку.

ngOnInit() {
  this.controls = {
    phoneNumber: new FormControl(''), 
    type: new FormControl('')
  };

  this.controls.phoneNumber.setValidators([
    this.requiredIf(this.controls.phoneNumber, this.controls.type),
    Validators.pattern('\\d+')
  ]);

  this.form = this.formBuilder.group(this.controls);
}

HTML почти тривиален. Я проверяю объект ошибок на экземплярах FormControl, которые я объявил вне группы форм.

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label>Type</label>    
  </div>
  <div>
    <select formControlName="type">
      <option value="">Select</option>
      <option *ngFor="let type of types" [ngValue]="type">
        {{type}}
      </option>
    </select>
  </div>  

  <div>
    <label>Phone number</label>
  </div>
  <div>    
    <input formControlName="phoneNumber" />
  </div>  
  <div *ngIf="controls.phoneNumber.errors?.required">
    Required
  </div>
  <div *ngIf="controls.phoneNumber.errors?.pattern">
    Invalid pattern
  </div>

  <div>
    <button>Submit</button>
  </div>
</form>

DEMO: https://stackblitz.com/edit/angular-fz6jjq