Angular 11：如何从多个组件共享的服务中获取对 Reactive Form 的更新

Question

在 Angular 11 中， 使用 Reactive Forms 从共享服务中的属性获取更新的最佳方法是什么？

如果一个组件更新服务中的值，另一个组件应该如何在不将所有内容更改为主题然后修补现有表单的情况下获得更改？

我定义形式：

<form [formGroup]="form" class="form-horizontal" role="form">
<div formGroupName="user">
    <mat-form-field>
        <input matInput formControlName="name" placeholder="Username">
    </mat-form-field>
    <mat-form-field>
        <input matInput formControlName="fullName" placeholder="Full Name">
    </mat-form-field>
</div>

createForm() {
this.form = this.fb.group({
  user: this.fb.group({
    name: [this.userService.currentUser.name],
    fullName: [this.userService.currentUser.fullName]
  }),
});

}

这只是一个示例，但是如果 userService.fullName 中的值发生更改，我将如何更新此组件的表单？我可以使用 Subject，但我必须始终设置 currentUser 并且不能只更新子属性，在更复杂的对象中，事情似乎变得更加混乱。

我可以为此使用模板驱动的表单，但是验证会更加复杂。有没有更好的方法来做到这一点？

类似于this question，但我还没有真正看到好的答案。

Answer 1

为 FormGroup（或任何 Form 元素）提供服务：patchValue 或 setValue（部分或全部更新）

FormGroup（或任何 Form 元素）到 Service : valueChanges

// FormGroup to service (don't forget to unsubscribe)
this.myFormGroup.valueChanges.subscribe(data => this.service.updateData(data));

// Service to FormGroup (don't forget to unsubscribe)
this.service.data$.subscribe(data => this.myFormGroup.patchValue(data));