angular5 - Angular 如何更改表单控件或表单组的有效性，具体取决于复选框是否被选中使用响应式(Reactive)表单

Question

如何使用响应式表单根据复选框是否被选中来更改表单控件或表单组所需的有效性。

     createForm() {
    this.dvraForm = this.fb.group({ // <-- the parent FormGroup
        primary: this.fb.group({
            txtpremiumDVRA: ['', [Validators.required, ValidatePremium]],
            txtSumInsured: '',
        }),
        fund: this.fb.group({
            txtMoneyMarketFund: '100',
            txtFixedIncomeFund: '0',
        }, {
            validator: totalFund('txtMoneyMarketFund', 'txtFixedIncomeFund'),
            validator2: totalFund2('txtMoneyMarketFund', 'txtFixedIncomeFund')}),
        cbTopUp: false,
        topUp: this.fb.group({
            cboTopUpFrequency: '',
            txtStartPolicyYear: ['', Validators.required,],
            txtNoofTopUpYrs: ['', Validators.required,],
            txtTopUpAmount: ['', [Validators.required, ValidateTopUpAmountDVRA]]
        }),
    });

}

Answer 1

您可以通过编程方式向任何表单控件添加或删除验证器。您可以订阅复选框的 valuChanges Observable(如果它不是控件，您可以在单击事件中处理它)。您可以像这样根据复选框的 ValueChanges 出现的事件删除验证器。清除验证器

this.form.controls.requiredControl.clearValidators();
this.form.updateValueAndValidity(); // this is to rerun form validation after removing the validation for a field.

设置验证器

this.form.controls.requiredControl.setValidators([Validators.required]);
this.form.updateValueAndValidity(); // this is to rerun form validation after removing the validation for a field.