Angular 2, setze Wert von Texteingaben in Form

Question

Also ich probiere einige Angular 2 aus und ich mag es so weit. Aber ich brauche Hilfe, um diese neue Landschaft zu navigieren.

Ich habe ein Formular, um eine Benutzerdetails und eine Liste auf der Seite mit allen meinen Benutzern zu bearbeiten. Wenn ich auf einen der Benutzer in der Liste klicke, möchte ich mein Edit-User-Formular mit den Benutzerdetails füllen (setEditForm (user)).

Ich habe es funktioniert und alle. Aber ich muss sagen, es ist nicht richtig, ngControl und ngModel gleichzeitig zu verwenden. Aber vielleicht ist es ...

Ist dies der richtige Weg, um dies zu tun oder habe ich nur etwas Glück dabei, es funktioniert?

@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

Sicher, dass Sie ngControl/ngFormControl und ngModel zugleich nutzen können. Aus der Angular2 Dokumentation (https://angular.io/docs/ts/latest/guide/forms.html):

• Zweiweg-Datenbindung mit [(ngModel)] Syntax für das Lesen und Schreiben von Werten zur Eingabe steuert

• ngControl mit dem Änderungszustand zu verfolgen und Gültigkeit der Form steuert

• Validierungsfehler Benutzern die Anzeige und/deaktivieren Kontrollen Form

• sh ermöglichen Aring Informationen unter Kontrollen mit Vorlage lokale Variablen

Kurz gesagt, würde ich ngModel verwenden, wenn ich brauche Zwei-Wege-Bindung und ngForm/ngFormControl wenn ich Validierung benötigen, aber Sie können beide mischen.

Wenn Sie nur bekommen Werte und Meldungen müssen, wenn die Eingangswerte aktualisiert werden, ngControl/ngFormControl` ist genug ...

Beide erlauben Veränderungen zu erkennen:

• Ereignis ngModelChange
• abonnieren on ctrl.valueChanges

Sie können bidirektionale Bindung für ngModel für Ihre Formularelemente konfigurieren:

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