启用/禁用表单控件触发 valueChanges Angular 2 Forms答案

【问题标题】：enable/disable form control fires valueChanges Angular 2 Forms启用/禁用表单控件触发 valueChanges Angular 2 Forms
【发布时间】：2017-08-06 02:56:36
【问题描述】：

知道为什么在运行以下代码时我会触发'firstName' 控件的valueChanges 事件吗？

let form: FormGroup = this.createForm();
form.controls['firstName'].enable();

form.controls['firstName'].valueChanges(value=>{
      //some code
});

由于没有改变任何值（只是状态），我不希望在这里触发valueChanges，只有statusChanged。

我错过了什么吗？

【问题讨论】：

statusChanged 用于验证。

标签： angular angular2-forms

【解决方案1】：

不知道它为什么会这样，但您可以发送emitEvent: false 来启用/禁用而不触发valueChanges。

form.controls['firstName'].enable({ emitEvent: false });

【讨论】：

谢谢你，谷歌搜索并没有把我们带到任何地方！
谢谢。请注意，当您尝试启用或禁用整个表单时它也可以工作：form.enable({ emitEvent: false });
叹气，这应该反过来工作......默认情况下它应该是假的，如果需要开发人员应该将其更改为真......谁认为这是个好主意哈哈

【解决方案2】：

基本上完整的表单会映射到模型上，因此无论何时启用/禁用任何控件，表单模型的属性都会发生变化。并且由于模型正在更改，因此将触发 valueChanges 事件。我觉得很正常。

【讨论】：

除了使用this.form.controls[controlKey].enable({emitEvent:false});之外，还有一些关于如何避免它的建议？
他们说此功能存在错误：github.com/angular/angular/issues/12366
你是救命稻草
该死的很棒的评论@Ben
@Ben Great JERB！

【解决方案3】：

我有 Angular 版本 6.0.3

this.form.get('inputName').setValue(newValue, {onlySelf: true, emitEvent: false});

这对我有用。

【讨论】：

OP 在Angular 2 中询问，而不是在 6 中
这对我来说完美无缺。感谢您发布答案！
@Narendra Jadhav：AngularJS 是最初的框架。那应该总是写成AngularJS。 “Angular”或“Angular 2”是指新版本的 Angular。这有一个版本号，如 6.0.3。所以 Angular2 6.0.3 对我来说没问题。

【解决方案4】：

ValueChange 在 Angular 中启用或禁用表单时被触发是他们代码中的一个错误。

如果您不希望在启用或禁用表单时触发ValueChange，我找到了一个可能有帮助的解决方法。

Object.keys(this.toolForm.controls).forEach(key => {
    this.form.controls[key].enable({onlySelf: true, emitEvent: false});
});

上面的代码为我解决了这个问题。

【讨论】：

角度反应表单文档中的某处是否提到了这种行为？否则很难说这是一个错误，也许是设计使然。
github.com/angular/angular/issues/12366 有很多关于同一问题的讨论。