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

Posted 2023-03-13

【中文标题】启用/禁用表单控件触发 valueChanges Angular 2 Forms

【英文标题】：enable/disable form control fires 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 用于验证。

【参考方案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 有很多关于同一问题的讨论。