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:

我通过向复选框添加 (ngModelChange)='requireSupervisor' 并更改 requireSupervisor 函数以在整个控制组中包含 updateValueAndValidate 来尝试 gunter 的方法:

    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 进行切换，它将失败。