Liaison de données bidirectionnelle dans des formulaires pilotés par modèle

Question

J'ai une forme réactive, dans laquelle j'ai un prénom, un nom de famille et finalement un champ de texte. Quand je donne le prénom et le nom, la valeur de la zone de texte du nom d'affichage doit contenir le prénom et le second nom concaténés. Mais comme je suis encore en phase d'apprentissage, je n'arrive pas à comprendre ce qui ne va pas avec ce code. Tout conseil serait utile. Je vous remercie.

Voici mon code

<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

gifs:

Answer 1

Vous pouvez également prendre l'approche plus « réactive » et écouter les changements de la forme comme:

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

Ensuite, vous pouvez même vous débarrasser des données de liaison à deux voies inutiles (et le local correspondant état) vous utilisez pour firstname et secondname comme ça. Voir le plunker: https://plnkr.co/edit/h5aFRDTWfj0gQ69CvVK7?p=preview

Answer 2

Quelque chose comme cela devrait fonctionner (après: https://angular.io/docs/ts/latest/guide/user-input.html)

Dans votre modèle:

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

Dans votre component.ts:

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

Answer 3

Pour vous premier numéro nom d'affichage est pas mis à jour seconde Nom

qui est parce que vous êtes vous rencontrez faute de frappe là, vous devez avoir la valeur model pas là formControlName vérifier la mise à jour du code 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> 

Et vous mettre à jour la valeur de la forme que vous avez de Display Name vous devez tirer un événement comme

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

ou tout autre événement (onBlur, onClick, onFocus pour les deux premières zones de texte) dans le composant .

Answer 4

Vous devez modifier la saisie de votre nom d'affichage comme ceci.

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

De cette façon, vous aurez une liaison unidirectionnelle au prénom et au second nom dans cette entrée.

deuxième chose que vous devez changer est votre app.component.ts comme ceci:

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

il suffit d'ajouter une chaîne vide et vous êtes bon pour aller.