ngControl kann keine Standardwerte in Angular2 erhalten.

Question

Ich erstelle ein Formular mit Angular 2 (RC.3), aber die ngForm Direktive kann keine Standardwerte erhalten (value Attribut).

// app.component.html 
<form (ngSubmit)="onSubmit(editForm.value)" #editForm="ngForm"> 
    <input ngControl="firstName" type="text" value="{{user?.firstName}}"> 
    <input ngControl="lastName" type="text" value="{{user?.lastName}}"> 

    <input type="submit" value="Edit"> 
</form> 

// app.component.ts 
... 
export class AppComponent { 
    public user: UserModel; 

    constructor(private _api: ApiService) { 
    // Get user data. 
    this._api.get('/users/self').subscribe(
     (user: UserModel): void => { this.user = user; } 
    ); 
    } 
    onSubmit(user: UserModel): void { 
    console.log(user); 
    } 
} 

Wenn user Objekt der Benutzerdaten aufweist, wird input Element ein Wert von firstName Benutzerobjekt gesetzt hat. Wenn ich die Werte des Elements input nicht eingabe und ändere (d. H. value Attributwerte), hat editForm.value keine Werte wie die folgenden.

{ firstName: null, lastName: null } 

Wenn ich input Elements Werte zu ändern, editForm.value erkennt seine Änderungen und Werte eingestellt werden. Was soll ich tun?

---

Auch ich verstehe nicht, wie ngControl und ngModel richtig zu nutzen. Ich weiß, ngControl bietet Validierungen und Betriebsstatus, ngModel bietet, um Präsentation Layer-Modelle zu synchronisieren, aber ich verstehe nicht den Unterschied zwischen ngControl und ngModel vollständig.

Ich denke, dass wir Formularwerte mit nur ngControl bekommen können, so ngModel und Zwei-Wege-Bindung ist nicht erforderlich ...

Answer 1

Versuchen Sie dies für Ihre Komponente:

// app.component.ts 
import { Component } from "@angular/core"; 
import { FormBuilder, ControlGroup, Validators} from "@angular/common"; 
import { ApiService } from "./services/api-service"; 
import { UserModel } from "./models/user-model"; 

@Component({ 
    templateUrl: "app.component.html", 
    providers: [ApiService], 
}) 
export class PlayerPage { 

    user: UserModel; 
    userForm: ControlGroup; 

    constructor(private _api: ApiService, fb: FormBuilder) { 

     // initialize to a new, blank user 
     this.user = new UserModel(); 

     // get the user 
     this._api.get("users/self").subscribe((user: UserModel): void => { 
      this.user = user; 
     }); 

     // create a control group for the form 
     this.userForm = fb.group({ 
      firstName: [this.user.firstName, Validators.required], 
      lastName: [this.user.lastName, Validators.required] 
     }); 
    } 

    onSubmit($event, user) { 
     $event.preventDefault(); 
     console.log(user); 
    } 
} 

Und in der Vorlage:

// app.component.html 
<form [ngFormModel]="userForm" (submit)="onSubmit($event, user)"> 
    <input ngControl="firstName" [(ngModel)]="user.firstName" /> 
    <input ngControl="lastName" [(ngModel)]="user.lastName" /> 
    <input type="submit" value="Edit" [disabled]="!userForm.valid" /> 
</form> 

ein Problem könnte sein, dass der API-Aufruf nicht in einer angemessenen Frist zurückkehrt und so gibt es keine Daten, die Ihr Formular füllen mit. Andernfalls wird die Übergabeschaltfläche in diesem Formular deaktiviert, während das Formular ungültig ist, in diesem Fall, wenn eines der beiden Felder leer ist.