Question

我在How to trigger Form Validators in angular2

中解释了我想要实现的目标

但是在那里，没有解释你如何将复选框状态传递给文本框的验证器。我的代码如下

组件：

export class FormComponent { 

  static get annotations() {
        return [
            new Component ({
                templateUrl: "./form.component.html",
                directives: [FORM_DIRECTIVES],
            })
        ];
    }

    static get parameters() {
        return [[FormBuilder]];
    }

    constructor (formbuilder) {
        this.checkbox = new Control(false);
        this.name = new Control('', nameValidator(this.checkbox.value));

        this.myForm = formbuilder.group({
            checkbox: this.checkbox,
            name: this.name,
        });

        this.checkbox.valueChanges
        .subscribe({
            next: (value) => { this.name.updateValueAndValidity(); }
        });
    }
}

验证器功能

function nameValidator(checkbox) {
    return function(control) {
        if (checkbox && !control.value)
            return { required: true };
        return null;
    }
}

但更新的复选框值在调用updateValueAndValidity()时未反映在验证器函数中。我在这里缺少什么？

Answer 1

我认为您没有为相关控件订阅正确的复选框更新方式。您需要提供回调以在更新复选框时收到通知：

this.checkbox.valueChanges
    .subscribe(
      (value) => { this.name.updateValueAndValidity(); }
    );

关于复选框的值，您将其作为值（它是基本类型而不是引用）提供，因此Angular2无法更新它。要访问当前值，您需要提供控件本身（引用）并使用其value属性：

function nameValidator(checkboxCtrl) {
  return function(control) {
    let checkbox = checkboxCtrl.value;
      if (checkbox && !control.value)
          return { required: true };
      return null;
  }
}

以下是创建控件的新方法：

this.checkbox = new Control(false);
this.name = new Control('', nameValidator(this.checkbox));

这是相应的plunkr：https://plnkr.co/edit/bA3Y3G4oAk9wanzNMiS2?p=preview。

Angular 2 - ES6 - 根据复选框值触发表单验证器

1 个答案: