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

Answer 2

尝试拨打updateValueAndValidity({onlySelf: false, emitEvent: false});

这是它的签名：

updateValueAndValidity({onlySelf, emitEvent}?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
}): void;

Plunker

<强>更新：

情况并非如此，我们在插件中所做的最终是订阅了复选框的更改事件，并因此禁用/启用输入字段（在其上留下所需的验证器，它将被排除在外）来自验证，如果它被禁用，这比删除验证器更好。）

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

2 个答案: