角表单提交仅具有更改的字段-不含完整表单值

Question

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

 // 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输入字段，然后按Submit时，将在输出中显示。

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

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

中获取的

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

另一个例子

形成初始状态（正确）

在为姓氏输入2并为关于字段输入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，有关模板驱动的表单的详细信息，请参见https://angular.io/guide/forms