Angular 表单提交仅具有更改的字段 - 不是完整的表单值答案

【问题标题】：Angular form submit only has fields with changes - not the full form valuesAngular 表单提交仅具有更改的字段 - 不是完整的表单值
【发布时间】：2019-04-23 12:26:00
【问题描述】：

当我提交我的角度表单时，我只获得更改字段的值。我应该得到正确的完整表单值吗？

 // Profile.html
<form [formGroup]="profileForm" (ngSubmit)="submitProfileForm(profileForm.value)" #myform="ngForm">

 <input type="text" class="form-control" id="firstName" value="{{currentUserMeta.firstName}}" formControlName='firstName'>

 <input type="text" class="form-control" id="lastName" formControlName='lastName'value="{{currentUserMeta.lastName}}">
....
</form>

// Profile.ts
submitProfileForm(value: any) {
    console.log(this.profileForm.get('firstName').value);
    console.log(this.profileForm.get('lastName').value);
    console.log(value);
    this.userService.updateUserProfile(value);
}

例如，当我仅更改 about 输入字段然后按提交时，我会在输出中得到它。

{displayName: "", firstName: "", lastName: "", about: "12"}

firstName 和 lastName 具有值，它们是从可观察的 currentUserMeta

中获取的

在我看来，表单不知道这些值何时通过角度绑定 {{ }} 更新。

另一个例子

形成初始状态（正确）

按 2 输入姓氏，按 3 输入 about 字段，然后按提交

如您所见，日志中不存在 firstName 值 1。甚至试图通过日志打印出来也行不通。

 console.log(this.profileForm.get('firstName').value);

我应该补充一点，如果表单已经加载并且我一次或一次更新了所有输入，我将获得所有值（更改和未更改）。（提交后我不会重定向到另一个页面）。如果我做错了什么，请告诉我。

【问题讨论】：

标签： angular observable angular-forms

【解决方案1】：

您的方法不是 100% 没问题，它表明您正在使用 ModelDrivenForm 并传递更像 TemplateDrivenForm 的值。

如果您使用 ModelDrivenForm，就像您正在使用的接缝一样，您可以声明表单的 [formGroup] 和输入的 formControlName，但您不应该将预定义的value="{{currentUserMeta.lastName}}"中的值

你应该在你的 ts 文件中设置这些值，例如当你有这些数据时使用this.profileForm.get('lastName').set(this.currentUserMeta.lastName);。

我希望这会有所帮助，有关 ModelDrivenForms 的更多信息在文档https://angular.io/guide/reactive-forms 中，有关模板驱动表单的信息在此处https://angular.io/guide/forms

【讨论】：

你是对的！它在这里描述。 angular.io/api/forms/FormControlName#use-with-ngmodel 因为数据源是可观察的，所以我想在 ngOnInit() 中设置订阅中的值。你觉得这有什么问题吗？ this.currentUserMeta.subscribe((data) => { this.profileForm.get('lastName').setValue(data.lastName); });
我看不出有什么问题，如果在那个订阅中你得到了两个需要的值，你可以做的是一次设置它们，就像这样使用 patchValue() : this.currentUserMeta.subscribe((data) => { this.profileForm.patchValue( { firstName: data.firstName lastName: data.lastName }); });