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

问题是只有当两个输入字段中的文本更新时才会执行验证，而如果我 check/uncheck 复选框状态不会改变并且强制验证我必须更改第二个文本框中的文本。

Here 你可以在 stackblitz 上看到一个例子：如果你选中复选框，状态不会改变。

当复选框状态改变时如何强制验证？

Answer 1

您可以根据点击的复选框动态添加表单控件所需的验证。

模板：

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

Answer 2

您需要使用跨域验证。在您的表单组中包含复选框

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

在这种情况下，如果 'checked' 为真，则需要 'second'

如有疑问https://angular.io/guide/form-validation#cross-field-validation

Answer 3

如果您确实不想将复选框值包含到您的表单中，您可以制作一个单独的表单控件，它不包含在您的表单中。根据复选框值，您可以清除验证器或添加所需的验证器：

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

Angular 7 - 只有选中复选框时才验证输入字段

Angular 7 - Validate input field only if checkbox is checked

angular-validation

angular