Angular 2 禁用控件不包含在 form.value 中答案

【问题标题】：Angular 2 disabled controls do not get included in the form.valueAngular 2 禁用控件不包含在 form.value 中
【发布时间】：2017-03-02 01:55:28
【问题描述】：

我注意到，如果我禁用 Angular 2 响应式表单上的控件，则该控件不会包含在 form.value 中。例如，如果我像下面这样定义我的表单：

this.notelinkingForm = new FormGroup({
    Enabled: new FormControl(settings.Enabled, Validators.required),
    LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
    LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});

并检查 this.notelinkingForm.value，如果所有控件都已启用，则输出将是：

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"}

但是，当某些控件被禁用时，它将是：

{"Enabled":true}

注意如何排除禁用的控件。

我的意图是，当表单发生更改时，我希望能够将 form.value 及其所有属性传递给我的其余 API。如果它不包含禁用的项目，这显然是不可能的。

我在这里遗漏了什么还是这是预期的行为？有没有办法告诉 Angular 在 form.value 中包含禁用的项目？

欢迎你的想法。

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

你可以使用：

this.notelinkingForm.getRawValue()

来自Angular docs：

如果您想包含所有值而不考虑禁用状态，请使用此方法。否则，value 属性是获取组值的最佳方式。

【讨论】：

想知道为什么 Angular 团队会这样做
@inorganik 他们这样做是因为可以启用禁用的控件并编辑其值。在这种情况下，getRawValue() 将返回一个带有篡改值的对象。
这其实是件好事。例如，我知道我禁用的控件的值不会改变，所以我不想将它们包含在保存 API 中，因为我首先为这些控件分配了数据库中的值。但在某些情况下，我实际上确实希望包含那些具有从前端分配的值并且它们不存储在数据库中的控件，并且此功能涵盖了它。有两种选择总是好的。
这是真的@ChiragMS。只要我可以在readonly 和disabled 之间进行选择，我就喜欢这个方面。但是，例如，情况并非如此。我在下面的答案中描述的复选框和单选按钮。在那些情况下，我不喜欢我必须以不同的方式获取数据并专门为这种情况编写代码。
“删除”该值是一个毫无意义的论点，因为有人可能会篡改它。永远不要相信客户端数据。您应该总是期待有人篡改您的数据，并且无论如何都要在服务器端重新检查它。这只是 Angular 的另一个烦恼。此外，Angular 11 不包含禁用值，即使使用 getRawValue()。

【解决方案2】：

我使用的另一个选项是：

this.form.controls['LinkToPreceeding'].value;

【讨论】：

【解决方案3】：

感谢 @Sasxa 为我提供了 80% 的所需。

对于那些正在寻找相同问题的解决方案但对于嵌套表单的人来说，我可以通过改变我的习惯来解决

this.notelinkingForm.get('nestedForm').value

到

this.notelinkingForm.getRawValue().nestedForm

【讨论】：

【解决方案4】：

如果您使用readonly 而不是disabled，它仍然不可编辑，而数据将包含在表单中。但这并非在所有情况下都是可能的。例如。它不适用于单选按钮和复选框。见MDN web docs。在这些情况下，您必须申请此处提供的其他解决方案。

【讨论】：

【解决方案5】：

有两种方法可以获得禁用的表单值。首先

 onSubmit(){
 for (const prop in this.formControl.controls) {
      this.formControl.value[prop] = this.formControl.controls[prop].value;
    }
}

第二种方式您可以在 onSubmit 事件中启用表单

 onSubmit(){
     this.formControl.enable() 
   //Your logical/operational statement goes here

  //at last if you wish you can again disable your form like this
   this.formControl.disable();
}

【讨论】：