如果选中复选框，如何向 matInput 添加所需的验证

Question

我在 FormGroup 中有 5 个复选框，使用 ngFor 显示，如果选中任何复选框，则必须是必填字段的 1 个 matInput。

.ts

this.gridForm = this.fb.group({
      cbox1: [''],
      cbox2: [''],
      cbox3: [''],
      cbox4: [''],
      cbox5: [''],
      input1: ['', Validators.required] });

.html

            <div *ngFor="let table of xTables; let i = index;">
              <mat-checkbox formControlName="{{xTableKeys[i]}}">{{table}}</mat-checkbox>
            </div>
            <mat-form-field>
              <input matInput formControlName="xType" placeholder="X Type">
            </mat-form-field>

我为输入添加了必需的验证器，但我需要的是仅在选中任何复选框后才需要它。 当前状态是我无法提交表单，除非我填写输入，但选中或不选中复选框。

Answer 1

您可以使用自定义验证器：

    this.gridForm = this.fb.group({
          cbox1: [''],
          cbox2: [''],
          cbox3: [''],
          cbox4: [''],
          cbox5: [''],
          input1: ['', [requiredIfValidator(() => this.gridForm.get('cbox1' && 'cbox2' && 'cbox3' && 'cbox4' && 'cbox5').value)]] 
    });
    
        function requiredIfValidator(predicate) {
          return (formControl => {
            if (!formControl.parent) {
              return null;
            }
            if (formControl.parent.get('cbox1').value) {
              return Validators.required(formControl);
            }
            if (formControl.parent.get('cbox2').value) {
              return Validators.required(formControl);
            }
            if (formControl.parent.get('cbox3').value) {
              return Validators.required(formControl);
            }
            if (formControl.parent.get('cbox4').value) {
              return Validators.required(formControl);
            }
            if (formControl.parent.get('cbox5').value) {
              return Validators.required(formControl);
            }
            return null;
          })
        };

订阅值更改以在您切换复选框时触发条件验证。

    this.gridForm.get('cbox1').valueChanges
      .subscribe(value => {
        this.gridForm.get('input1').updateValueAndValidity();
      });
    this.gridForm.get('cbox2').valueChanges
      .subscribe(value => {
        this.gridForm.get('input1').updateValueAndValidity();
      });
    this.gridForm.get('cbox3').valueChanges
      .subscribe(value => {
        this.gridForm.get('input1').updateValueAndValidity();
      });
    this.gridForm.get('cbox4').valueChanges
      .subscribe(value => {
        this.gridForm.get('input1').updateValueAndValidity();
      });
    this.gridForm.get('cbox5').valueChanges
      .subscribe(value => {
        this.gridForm.get('input1').updateValueAndValidity();
      });

这称为自定义条件字段验证器。 查看此链接https://medium.com/ngx/3-ways-to-implement-conditional-validation-of-reactive-forms-c59ed6fc3325

Answer 2

enableInput 也应该是一个数组。 否则，它将仅采用上次更新复选框的值。

<div *ngFor="let table of xTables; let i = index;">
    <mat-checkbox formControlName="{{xTableKeys[i]}}" [checked]="enableInput[i]" 
    (change)="enableInput[i] = !enableInput[i]">{{table}}</mat-checkbox>
</div>
<mat-form-field>
    <input matInput formControlName="xType" placeholder="X Type" 
    [attr.disabled]="getInputState()">
</mat-form-field>

public enableInput = [];

getInputState() {
    // checkboxStatus sets to true if at least one checkbox is checked
    const checkboxStatus = this.enableInput.find(checkboxVal => checkboxVal) ? true : false;
    return checkboxStatus;
}