javascript - 表单的自定义 "Multi-Parameter"验证器并不总是触发

Question

我有一个 Angular2.0.0-beta.9 和 Typescript 1.7 应用程序。在此应用程序中，我正在创建一个自定义验证器，它使用多个提供的参数来确定控件是否有效。

我正在使用this answer作为灵感

这是我的表单的类的构造函数:

constructor(fBuilder: FormBuilder) {

// initialize shift custom validators
this._sVal = new ShiftValidator; // a custom validator class I import

// build form controls
this.shiftForm = fBuilder.group({
    'TradeDate': ['2016-03-23', Validators.required],
    // other fields removed for brevity
    'SupervisorRankID': [0, (c: Control) => this._sVal.valSelectOptional(c, this.requireSupervisor())]
  });
}

这是验证器类:

export class ShiftValidator {

// other validations removed for brevity
valSelectOptional(c: Control, required: boolean): { [s: string]: boolean } {
    if (Number(c.value) < 1 && required) {
        return { 'invalidSelection': true };
    }
  }
}

这是我用来返回验证器第二个参数的 bool 值的方法/函数:

    requireSupervisor(): boolean {
    if (this.currentTrade === undefined) { return false; }
    \\ NOTE: currentTrade is a custom class / object that is imported into this module
    if (this.currentTrade !== undefined) {
        return this.currentTrade.SupervisorApproval;
    } else {
        return false;
    }
}

问题

只有当我传递的 booelan 值更改为 true 时，此验证器才会“触发”。当我将 requireSupervisor 的值更改为 false 时，验证器不会触发。

问题

有人可以帮我弄清楚为什么验证器不会在每次参数值发生变化时触发吗？

编辑1:

我尝试了 Gunter 的方法，将 (ngModelChange)='requireSupervisor' 添加到复选框并更改 requireSupervisor 函数以在整个控制组上包含 updateValueAndValidate:

    requireSupervisor(): boolean {
    if (this.currentTrade === undefined) {
        this.validateSupervisor();
        return false;
    }

    if (this.currentTrade !== undefined) {
        this.validateSupervisor();
        return this.currentTrade.SupervisorApproval;
    } else {
        this.validateSupervisor();
        return false;
    }
}

validateSupervisor(): void {
    if (this.shiftForm !== undefined) {
        this.shiftForm.updateValueAndValidity();
    }
}

如果我将上面的 validateSupervisor 函数更改为以下内容，我会收到最大调用堆栈超出错误:

validateSupervisor(): void {
    if (this.shiftForm !== undefined) {
        this.shiftForm.controls['SupervisorRankID'].updateValueAndValidity();
    }
}

问题: 验证器逻辑有效，问题是验证器逻辑仅在单击/选择复选框时触发。当您取消选中/取消选择该复选框时，不会触发验证器。

有人可以帮我弄清楚为什么复选框的取消选中操作不会触发验证器吗？

Answer 1

看来唯一的选择是:

control.updateValueAndValidity() 

尽管应小心添加其触发器以避免意外的更改检测。

plunker

在此示例中，切换 required 工作正常，但如果您尝试直接从模板 required!=required 执行此操作，则会失败。