Angular 表单提交仅包含更改的字段 - 而不是完整的表单值

Question

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

 // 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);
}

例如，当我仅更改关于输入字段然后按提交时，我在输出中得到了这个。

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

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

中获取的

在我看来，当这些值通过 angular 绑定 {{ }} 更新时，表单并不知道。

另一个例子

形成初始状态（正确）

在为 lastName 按 2 和为 about 字段按 3 然后按提交之后

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

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

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

Answer 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 and about template-driven form are here https://angular.io/guide/forms

Angular 表单提交仅包含更改的字段 - 而不是完整的表单值

Angular form submit only has fields with changes - not the full form values

angular

observable

angular-forms

另一个例子