角反應形式克隆值

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的值。