Angolare 2, imposta il valore degli input di testo nel modulo

Question

Quindi sto provando un po 'di Angular 2 e mi piace fin'ora. Ma ho bisogno di aiuto per navigare in questo nuovo paesaggio.

Ho un modulo per modificare i dettagli di un utente e un elenco sul lato con tutti i miei utenti. Quando faccio clic su uno degli utenti nell'elenco, desidero compilare il modulo di modifica dell'utente con i dettagli dell'utente (setEditForm (utente)).

Ho funzionato e tutto. Ma devo dire che non è giusto usare ngControl e ngModel allo stesso tempo. Ma forse è ...

È questo il modo corretto per farlo o ho avuto un po 'di fortuna nel farlo funzionare?

@Component({ 
    template: ` 
    <form (ngSubmit)="editUser(f.value)" #f="ngForm"> 
     <input ngControl="nameInp" [ngModel]="selectedUser.name" type="text"> 
     <input ngControl="ageInp" [ngModel]="selectedUser.age" type="text"> 
     <input ngControl="cityInp" [ngModel]="selectedUser.city" type="text"> 

     <button type="submit">Save</button> 
    </form> 
)} 

export class AdminComponent { 
selectedUser:UserModel; 

constructor() { 
    this.selectedUser = new UserModel; 
    } 

    setEditForm(user:UserModel) { 
    this.selectedUser = user; 
    } 

    editUser(form:any) { 
    // Update DB with values 
    console.log(form['nameInp']); 
    console.log(form['ageInp']); 
    console.log(form['cityInp']); 
    } 
} 

Answer 1

Certo si può utilizzare ngControl/ngFormControl e ngModel allo stesso tempo. Dalla documentazione Angular2 (https://angular.io/docs/ts/latest/guide/forms.html):

• bidirezionale associazione di dati con [(ngModel)] sintassi per i valori di lettura e scrittura di controlli di input

• utilizzando ngControl per monitorare lo stato di cambiamento e validità del modulo controlla

• visualizzazione di errori di convalida per gli utenti e attivare/disattivare i controlli dei moduli

• sh Aring informazioni tra i controlli con il modello variabili locali

In breve, vorrei utilizzare ngModel se ho bisogno di legame a doppio senso e ngForm/ngFormControl se ho bisogno di convalida, ma si possono mescolare entrambi.

Se avete solo bisogno di ottenere i valori e le notifiche quando i valori di input vengono aggiornati, ngControl/ngFormControl` è abbastanza ...

Entrambi consentono di rilevare i cambiamenti:

• Evento ngModelChange
• Sottoscrivi su ctrl.valueChanges

È possibile configurare il binding a due vie per ngModel per gli elementi del modulo:

<form (ngSubmit)="editUser(f.value)" #f="ngForm"> 
    <input ngControl="nameInp" [(ngModel)]="selectedUser.name" type="text"> 
    <input ngControl="ageInp" [(ngModel)]="selectedUser.age" type="text"> 
    <input ngControl="cityInp" [(ngModel)]="selectedUser.city" type="text"> 

    <button type="submit">Save</button> 
</form>