angular - 模型驱动表单中的双向数据绑定(bind)

Question

我有一个 react 形式，其中，我有一个名字，一个姓氏，最后显示名称文本框。当我给出名字和姓氏时，显示名称文本框的值应该包含连接的名字和第二个名字。但由于我仍处于学习阶段，无法弄清楚这段代码有什么问题。任何意见将是有益的。谢谢。

这是我的代码

  <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)">
    <div class="form-group">
      <label for="">First Name</label>
      <input type="text" class="form-control" formControlName="firstname" [(ngModel)]="firstname">
    </div>
    <div class="form-group">
      <label for="">Last Name</label>
      <input type="text" class="form-control" formControlName="lastname" [(ngModel)]="secondnamename">
    </div>
    <div class="form-group">
      <label for="">Display Name</label>
      <input type="text" class="form-control" formControlName="displayname" value='{{firstname}}{{lastname}}'>
    </div>
    <div class="margin-20">
      <div>myForm details:-</div>
      <pre>myForm value: <br>{{myForm.value | json}}</pre>
    </div>
  </form>

Here is my plnkr

动图:

Answer 1

您还可以采用更“ react 性”的方法并听取如下形式的变化:

   this.myForm.valueChanges.subscribe((form) => {
     this.displayname = `${form.firstname} ${form.secondname}`;
   });

然后你甚至可以像这样摆脱用于 firstname 和 secondname 的不必要的双向数据绑定(bind)(以及相应的本地状态)。查看 Plunker:https://plnkr.co/edit/h5aFRDTWfj0gQ69CvVK7?p=preview