angular - Tvåvägsdatabindning i modellstyrda formulär

Jag har ett reaktivt formulär, där jag har ett förnamnsfält, ett efternamnsfält och slutligen ett visningsnamnsfält. När jag anger förnamn och efternamn ska värdet i visningsnamnsfältet innehålla förnamnet och efternamnet sammanfogade. Men eftersom jag fortfarande är i inlärningsstadiet kunde jag inte lista ut vad som är fel med denna kod. Alla råd skulle vara till hjälp. Tack.

Här är min kod

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

Här är min plnkr

Gif :

Svar #1

Du kan också ta det mer "reaktiva" tillvägagångssättet och lyssna på förändringar i formuläret som:

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

Då kan du till och med bli av med den onödiga tvåvägsdatabindningen (och det motsvarande lokala tillståndet) som du använder för firstname och secondname på det sättet. Se Plunker: https://plnkr.co/edit/h5aFRDTWfj0gQ69CvVK7?p=preview

Svar #2

Något liknande detta bör fungera (efter: https://angular.io/docs/ts/latest/guide/user-input.html)

I din mall:

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

I din component.ts:

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

Relaterade artiklar