Javascript 表格'；“中国习俗”；“多参数”；验证器并不总是启动

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

我用它作为灵感

下面是我的表单的类的构造函数：

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 };
    }
  }
}

问题 只有当我传递的booelan值更改为true时，此验证器才会“启动”。当我将RequirePerVisor的值更改为false时，验证程序不会触发

问题: 有人能帮我弄清楚为什么验证器不会在每次参数值更改时触发吗

编辑1： 我尝试了gunter的方法，在复选框中添加一个（ngModelChange）=“RequiresPerVisor”，并更改RequiresPerVisor函数，以在整个控制组中包含一个UpdateValue和Validate：

    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();
    }
}

问题： 验证器逻辑工作正常，问题是只有在单击/选中复选框时才会触发验证器逻辑。取消选中/取消选中复选框时，不会触发验证程序

---

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

这应该会调用验证：

this.shiftForm.controls['SupervisorRankID'].updateValueAndValidity();

可能需要石膏

(<Control>this.shiftForm.controls['SupervisorRankID'])
    .updateValueAndValidity();

（this.shiftForm.controls['SupervisorRankID']）
.updateValueAndValidity（）；

看来唯一的选择是：

control.updateValueAndValidity() 

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

---

在本例中，切换

required

效果很好，但如果您尝试直接从模板

required=必需的

它将失败。

AFAIK这是

控制组验证程序的预期行为

，仅对更改的控制启动验证

但是您可以使用Gunter和kemsky建议的

updateValueAndValidity

来操纵这种行为，它只需要一点微调

(<Control>this.shiftForm.controls['SupervisorRankID'])
   .updateValueAndValidity({onlySelf: true, emitEvent: true})

 // do this whenever requirement changes

（this.shiftForm.controls['SupervisorRankID']）
.updateValueAndValidity（{onlySelf:true，emitEvent:true}）
//只要需求发生变化，就这样做

注意：不要将其放入

requireSupervisor（）

或

validateSupervisor（）

中，因为这将导致递归

• 如果

  onlySelf

  为

  true

  ，此更改将只影响此

  控件的验证，而不影响其父组件

• 如果

  emitEvent

  为

  true

  ，此更改将导致

  控件上的
  valueChanges
  事件发出

• 这两个选项都默认为

  false

---

您可以尝试将formControl updateValueAndValidity方法的emitEvent设置为false

例如类似这样的内容：

this.shiftForm.controls['SupervisorRankID'].updateValueAndValidity({emitEvent : false});

来自角度文档：

this.shiftForm.controls['SupervisorRankID'].updateValueAndValidity({emitEvent : false});

如果emitEvent为true，此更改将在上引发valueChanges事件 要发出的窗体控件。这默认为true（当它下降时） 至updateValueAndValidity）

此外，您还可以仅将自己设置为false（默认为true），如下所示：

this.shiftForm.controls['SupervisorRankID'].updateValueAndValidity({onlySelf : true});

来自Angular docs：

如果onlySelf为true，则此更改只会影响 此FormControl而不是其父组件。这默认为false

我有一个类似的问题，一个棘手的和大的形式。这件事救了我

希望对你有帮助

---

在这里了解有关formControls的更多信息：

谢谢gunter，我已经尝试了一段时间，但它对我不起作用。我将复选框的ngModelChange事件绑定到表单视图模型中的一个函数，当我使用您的代码时，我得到一个超过最大调用堆栈大小的错误。这可能是由于

updateValueAndValidity（）

触发

validateSupervisor（）

引起的递归，反之亦然，你的普朗克帮我把最后几块拼好了。不要把你所有的代表都花在糖果上，也许你应该。我正试图回答另一个问题：对不起，打开的标签太多了。我的错。