模型驱动形式的双向数据绑定

Question

我有一个反应性的形式，其中，我有一个名字，一个姓，最后显示名称文本框。当我给出名字和姓氏时，显示名称文本框的值应该包含连在一起的名字和名字。但由于我还在学习阶段，无法找出这段代码的问题所在。任何建议都会有帮助。谢谢。

这里是我的代码

  <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>

这是我的长袍

全球综合框架：

​

​

Answer 1

您还可以采取更“被动”的方法，并听取以下形式的更改：

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

然后，您甚至可以消除用于firstname和secondname的不必要的双向数据绑定(以及相应的本地状态)。见柱塞：https://plnkr.co/edit/h5aFRDTWfj0gQ69CvVK7?p=preview

Answer 2

像这样的东西应该能工作(在：https://angular.io/docs/ts/latest/guide/user-input.html之后)

在模板中：

 <div class="form-group">
  <label for="">First Name</label>
  <input type="text" class="form-control" formControlName="firstname" [(ngModel)]="firstname" (keyup)="onKey($event)>
</div>
<div class="form-group">
  <label for="">Last Name</label>
  <input type="text" class="form-control" formControlName="lastname" [(ngModel)]="secondname" (keyup)="onKey($event)>
</div>
<div class="form-group">
  <label for="">Display Name</label>
  <input type="text" class="form-control" formControlName="displayname" value='{{displayname}}'>
</div>

在component.ts中：

onKey(event:any) { 
displayname = firstname + ' ' + secondnamename;
}

Answer 3

对于您来说，第一个问题显示名称不是更新第二个名称-

这是因为您在那里有错误，您必须让model值在那里而不是formControlName检查代码更新刨床

 <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}} {{secondnamename}}'> //change in this line
    </div>
    <div class="margin-20">
      <div>myForm details:-</div>
      <pre>myForm value: <br>{{myForm.value | json}}</pre>
    </div>
  </form>

如果要更新Display Name的表单值，就必须触发如下事件

this.element.nativeElement.dispatchEvent(new Event('input'));

或组件中的任何其他事件(前两个文本框的onBlur、onClick、onFocus )。