Angular Reactive Form 克隆值答案

【问题标题】：Angular Reactive Form clone valueAngular Reactive Form 克隆值
【发布时间】：2019-12-26 01:27:27
【问题描述】：

我正在使用 Angular Reactive Form 作为注册表单。

 this.personalDataForm = new FormGroup({
      'name': new FormControl(null, Validators.required),
      'username': new FormControl(null, Validators.required),
      'address': new FormControl(null, Validators.required),
      'email': new FormControl(null, [Validators.required, Validators.email]),
      'mobile': new FormControl(null),
      'password': new FormControl(null),
    });

在此表单中，我希望用户在 name 字段中键入类似值时自动填充到 username 字段

但是当用户在username字段中输入时，name字段不受影响。

请告诉我如何使用响应式表单来实现这一点。

【问题讨论】：

名称和用户名将存储在哪里？这也取决于您的用例。你指的是this.form.valueChanges吗？还是模板变量？或自动完成字段？你能具体说明你目前写的内容吗？
@ThomasCayne 我已经做了一些更改，现在是否消除了混乱
啊哈！我现在知道了。我将在下面发布我的答案

标签： javascript angular forms angular-reactive-forms

【解决方案1】：

将所有表单操作逻辑保存在一个位置（在您的 TS 文件中），这是您使用响应式表单后推荐的方式。

试试这个：

this.personalDataForm.get('name').valueChanges.subscribe((x) => {
  console.log('value has changed: ', x);
  this.personalDataForm.patchValue({ username: x });
});

要取消订阅 valueChanges，请查看以下答案：https://stackoverflow.com/a/46893278/2050306

工作stackblitz。

【讨论】：

我也打算这样建议。但是，请始终记住unsubscribe()，否则我们将体验到内存占用。参考：stackoverflow.com/a/54205373/4208845
@ThomasCayne 是的，需要取消订阅以避免内存泄漏。我更新了我的答案。
@ThomasCayne 为什么这个答案比使用参考更好？
#nameTemplate 是一个参考变量，正如我在下面回答的那样，在这种情况下，当只需要 ONE 操作时，它就是 simplest way。有些人喜欢简单的方法。根据用例，我使用了混合物，并在可行的情况下使用自定义指令。但是，form.valueChanges 可用于执行组合操作。例如，自动完成、搜索/排序、过滤、必须调用服务的位置、更新商店、表单、@Output() 等。

【解决方案2】：

您可以像这样在username 上使用模板变量（最简单的方法）：

<input type="text" formControlName="name" #nameTemplate />

<input type="text" formControlName="username" [value]="nameTemplate.value"/>

无论您在 name 字段中输入什么内容，都将反映在 username 字段中，反之亦然。并且表单将保存username 的值。

【讨论】：