将自定义验证动态删除到Angular 2中

Question

如果选中复选框,我想要设置输入.验证工作正常,但当我取消选中复选框时,我删除了所需的验证.但表单无效,保存按钮未启用.

在这里我的formbuilder.

this.filterForm = this.formBuilder.group(
                {
                    has_not_visited_in_days_group: this.formBuilder.group({
                        has_not_visited_in_days: [false],
                        has_not_visited_in_days_input: [''],
                    }, {validator: this.requiredIfHasNotVisitedChecked}),
                 });

这里有自定义验证器功能

requiredIfHasNotVisitedChecked(control: AbstractControl): void {
        const input = control.get('has_not_visited_in_days_input').value;
        const inputCheckbox = control.get('has_not_visited_in_days').value;
        control.get('has_not_visited_in_days_input').setValidators([]);
        if (inputCheckbox) {
            if (input === '' || input === null) {
                control.get('has_not_visited_in_days_input').setValidators([Validators.required]);
            }else {
                control.get('has_not_visited_in_days_input').setValidators([]);
            }
        }else{
            control.get('has_not_visited_in_days_input').setValidators([]);
        }
    }

我也试过了

  control.get('has_not_visited_in_days_input').setValidators(null);

提前致谢.有任何想法请帮助我.

Answer 1

我没有看到你需要自定义验证器,你可以只依靠一个简单的更改事件:

在这里,我喜欢通过使用变量缩短组件中的表单控件,以便它们更容易使用,因为属性路径可能会变得很长.以下是两个控件:

this.inputCtrl = this.filterForm.get('has_not_visited_in_days_group.has_not_visited_in_days_input')
this.checkboxCtrl = this.filterForm.get('has_not_visited_in_days_group.has_not_visited_in_days')

然后是复选框的更改事件:

<input (change)="check(checkboxCtrl.value)" type="checkbox" formControlName="has_not_visited_in_days"/>

就像Amit提到的那样,您需要更新表单控件的值和有效性.这是和检查复选框状态并相应更新验证器的函数:

check(bool) {
  if (bool) { 
    this.inputCtrl.setValidators([Validators.required])
  } else  {
    this.inputCtrl.setValidators(null)
  }   
  this.inputCtrl.updateValueAndValidity();
}

这只是一个建议,并提出了我个人更喜欢的选项.

但是如果您更喜欢自定义验证器,那么请继续(Amit的答案),只需添加updateValueAndValidity类似的建议.

DEMO