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

113

我注意到，如果我禁用了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

— 吉姆·卡尔弗威尔
source

246

您可以使用：

this.notelinkingForm.getRawValue()

从文档：

如果您希望包括所有值，而无论其禁用状态如何，请使用此方法。否则，该value属性是获取组值的最佳方法。

— 萨克斯
source

41

想知道为什么Angular团队会这么做

— inorganik

@inorganik之所以这样做，是因为可以启用禁用的控件并编辑其值。在这种情况下，getRawValue（）将返回具有篡改值的对象。

— 丹麦，

1

这实际上是一件好事。例如，我知道禁用的控件的值不会更改，因此我不想将它们包含在save API中，因为我首先从数据库中为这些控件分配了一个值。但是在某些情况下，我实际上确实希望包括那些具有从前端分配的值且未存储在数据库中的控件，而此功能将其覆盖。同时拥有这两种选择总是很好的。

— ChiragMS

没错，@ ChiragMS。只要可以在readonly和之间选择，我就喜欢这方面disabled。但这不是复选框和单选按钮的情况，如我在下面的答案中所述。在那些情况下，我不喜欢必须以不同的方式获取数据并为该情况专门编写一些代码。

— 桑德罗

10

我使用的另一个选项是：

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

— 路易斯·里卡多·卡耶塔诺·埃雷拉
source

7

谢谢@Sasxa给我80％的需求。

对于那些寻找相同问题的解决方案但对于嵌套表格的人来说，我可以通过更改常规方法来解决

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

至

this.notelinkingForm.getRawValue().nestedForm

— per
source

0

如果您使用readonly而不是，disabled则仍无法编辑，而数据将包含在表单中。但这并非在所有情况下都可行。例如，单选按钮和复选框不可用。请参阅MDN网站文档。在这种情况下，您必须申请此处提供的其他解决方案。

— 桑德罗
source