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

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>

Here is my plnkr

的Gif：

Answer 1

您还可以采取更多＆＃34;反应性＆＃34;接近并听取形式的变化，如：

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

然后你甚至可以摆脱用于firstname和secondname的不必要的双向数据绑定（以及相应的本地状态）。请参阅Plunker：https://plnkr.co/edit/h5aFRDTWfj0gQ69CvVK7?p=preview

Answer 2

这样的事情应该有效（在https://angular.io/docs/ts/latest/guide/user-input.html之后）

在你的模板中：

You entered: B

在你的component.ts中：

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

Answer 3

第一个问题显示名称未更新第二个名称 -

那是因为你在那里有拼写错误，你必须有model值formControlName检查代码更新planker

 <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，前两个文本框）。

Answer 4

您必须像这样更改您的显示名称输入。

 <input type="text" class="form-control" formControlName="displayname" [ngModel]=firstname+secondname> 

这样，您将在该输入中单向绑定firstname和secondname。

你需要改变的第二件事就是你的app.component.ts：

firstname:string = '';
secondname:string = '';

只需添加一个空字符串就可以了。