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

Jim*_*ell 88 angular2-forms angular

我注意到如果我禁用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)
});
Run Code Online (Sandbox Code Playgroud)

并检查this.notelinkingForm.value,如果启用了所有控件,则输出将为:

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"} 
Run Code Online (Sandbox Code Playgroud)

但是,当某些控件被禁用时,它将是:

{"Enabled":true} 
Run Code Online (Sandbox Code Playgroud)

请注意如何排除禁用的控件.

我的意图是,当表单更改时,我希望能够将form.value与其中的所有属性一起传递给我的rest API.如果它不包含禁用的项目,这显然是不可能的.

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

欢迎你的想法.

Sas*_*sxa 182

您可以使用:

this.notelinkingForm.getRawValue()
Run Code Online (Sandbox Code Playgroud)

来自docs:

如果您想要包括所有值而不管禁用状态,请使用此方法.否则,该value属性是获取组值的最佳方式.

  • 想知道为什么Angular团队这么做了 (23认同)
  • 这其实是一件好事。例如,我知道禁用的控件的值不会更改,因此我不想将它们包含在保存 API 中,因为我首先为这些控件分配了数据库中的值。但在某些情况下,我实际上确实想包含那些具有从前端分配的值的控件,并且它们不存储在数据库中,并且此函数涵盖了它。有两种选择总是好的。 (8认同)
  • 确实如此@ChiragMS。我喜欢这个方面,只要我可以在“只读”和“禁用”之间进行选择。但对于复选框和单选按钮来说,情况并非如此,正如我在下面的答案中所描述的那样。在这些情况下,我不喜欢这样,因为我必须以不同的方式获取数据并专门针对这种情况编写一些代码。 (3认同)
  • “删除”该值是毫无意义的争论,因为有人可能会篡改它。永远不要相信客户端数据。您应该_始终_预期有人会篡改您的数据,并无论如何在服务器端重新检查它。这只是 Angular 的另一个烦恼。此外,Angular 11 _不_ 包含禁用值,即使使用 getRawValue() 时也是如此。 (2认同)

epe*_*per 9

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

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

this.notelinkingForm.get('nestedForm').value
Run Code Online (Sandbox Code Playgroud)

this.notelinkingForm.getRawValue().nestedForm
Run Code Online (Sandbox Code Playgroud)


小智 6

我使用的另一个选项是:

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