角反应形式克隆值

Question

我将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 name段中

但是，当用户在username name段中键入内容时， name字段不会受到影响。

请让我知道如何使用反应式表单实现此目的。

Answer 1

将所有表单操作逻辑都放在一个地方（在TS文件中），这是使用Reactive Forms后的推荐方法。

尝试这个：

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

工作堆闪电战 。

Answer 2

您可以在username上使用模板变量，如下所示（最简单的方法）：

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

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

在name字段中键入的任何内容都会反映在username name段中，反之亦然。 并且该表单将保留username的值。