Угловой 7 - Проверять поле ввода, только если установлен флажок

Question

Я использую Angular 7, и у меня есть форма с двумя полями ввода, хотя первое всегда требуется, второе должно быть обязательным, только если установлен флажок.

Я пытаюсьиспользовать FormGroup с пользовательским валидатором:

<form [formGroup]="exampleForm">
  <mat-form-field>
    <input matInput placeholder="first" formControlName="first">
  </mat-form-field>
  <mat-checkbox [(ngModel)]=" checked" [ngModelOptions]="{standalone:true}">Make second input field required</mat-checkbox>
  <mat-form-field>
    <input matInput placeholder="second" formControlName="second">
  </mat-form-field>
</form>

exampleForm: FormGroup;
checked: boolean;

ngOnInit() {
  this.exampleForm = new FormGroup({
    'second': new FormControl('', [this.validateIfChecked()]),
    'first': new FormControl('example', [Validators.required])
  });
}


validateIfChecked(): ValidatorFn {
  return (control: AbstractControl): {
    [key: string]: any
  } | null => {
    if (this.checked) {
      return control.value ? null : {
        'err': true
      };
    }
    return null;
  }
}

Проблема в том, что проверка выполняется только при обновлении текста в двух полях ввода, в то время как если я установлю / сниму флажок, состояние не изменится, ичтобы вызвать проверку, мне нужно изменить текст во втором текстовом поле.

Здесь вы можете увидеть пример на stackblitz: если вы установите флажок, статус не изменится.

Как я могу форсировать проверку при изменении статуса флажка?

Answer 1

Вам необходимо использовать кросс-поле проверки.Включите флажок в вашей группе форм

<form [formGroup]="exampleForm">
  <mat-form-field>
    <input matInput placeholder="first" formControlName="first">
  </mat-form-field>
  <mat-checkbox formControlName="checked">Make second input field required</mat-checkbox>
  <mat-form-field>
    <input matInput placeholder="second" formControlName="second">
  </mat-form-field>
</form>


ngOnInit() {
  this.exampleForm = new FormGroup({
    'second': new FormControl(''),
    'checked': new FormControl(false),
    'first': new FormControl('example')
  }, [this.validateIfChecked()]);
}


validateIfChecked(): ValidatorFn {
  return (form: FormGroup): ValidationErrors | null => {
    const checked = form.get('checked');
    const second= form.get('second');
    if (checked && !second) {
      return {
        'err': true
      };
    }
    return null;
  }
}

В этом случае, если 'флажок' равен true, тогда требуется 'second'

, если сомневаетесь https://angular.io/guide/form-validation#cross-field-validation

Answer 2

Если вы на самом деле не хотите включать значение флажка в форму, вы можете создать отдельный элемент управления формой, который не включен в форму.На основе значения флажка вы можете очистить валидаторы или добавить необходимый валидатор:

checked = new FormControl(false);

// ...

this.checked.valueChanges.subscribe((bool: boolean) => {
  bool ? this.exampleForm.get('second').setValidators(Validators.required) : 
         this.exampleForm.get('second').clearValidators();
  this.exampleForm.get('second').updateValueAndValidity();
});

и соответствующий шаблон:

<mat-checkbox [formControl]="checked">Make second input field required</mat-checkbox>

Ваш разветвленный StackBlitz

Answer 3

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

Шаблон:

<form [formGroup]="exampleForm">
  <mat-form-field>
    <input matInput placeholder="first" formControlName="first">
  </mat-form-field>
  <mat-checkbox [(ngModel)]="checked" [ngModelOptions]="{standalone:true}" (click)="checkstate()">Make second input field required</mat-checkbox>
  <mat-form-field>
    <input matInput placeholder="second" formControlName="second">
  </mat-form-field>
</form>

Компонент:

checkstate(){
  this.checked = !this.checked;
  if(this.checked){
     this.exampleForm.get('second').setValidators(Validators.required);
  }else{
     this.exampleForm.get('second').clearValidators();
  }
  this.exampleForm.get('second').updateValueAndValidity();
}