时间戳

首页 > 解决方案 > Angular 表单提交仅具有更改的字段 - 不是完整的表单值

angular - 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中获取的

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

另一个例子

形成初始状态（正确）

在此处输入图像描述

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

在此处输入图像描述

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

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

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

标签： angularobservableangular-forms

解决方案

您的方法不是 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

推荐阅读