Angular 2 ngControl ohne ngFormModel

Question

Ich bin ein wenig verwirrt über ngControl & ngFormModel. Meiner Meinung nach macht es seither, wenn ich eine ControlGroup programmatisch deklariere, sollte ich kein ngFormModel (HTML-Formular) haben, das explizit alle meine Steuerelemente in html zusammenbindet.

Angesichts der folgenden Code wird dies nicht funktionieren, wenn ich meine Eingaben in das gleiche Formularobjekt in HTML und von seinem Namen orchestriert.

@Component({ 
    selector: "login-form", 
    template: ` 
     <div> 
      <input type="text" ngControl="usernameControl" [ngClass]="{'has-error': !usernameControl.valid}" /> 
      <input type="password" ngControl="passwordControl" [ngClass]="{'has-error': !passwordControl.valid}"/> 
     </div> 
    ` 
export class VenueCard{ 
    usernameControl: Control; 
    passwordControl: Control; 
    loginFormGroup: ControlGroup; 

    constructor(private _formBuilder: FormBuilder){ 
     this.usernameControl = new Control("", Validators.minLength(2)); 
     this.passwordControl = new Control("", Validators.minLength(6)); 

     this.loginFormGroup = this._formBuilder.group({ 
      username: this.usernameControl, 
      password: this.passwordControl}); 
    } 

    submitForm(){ 
     if (!this.loginFormGroup.valid){return;} 
     // Use usernameControl.value & passwordControl.value now 
    } 
} 

Was ich erwarte, ist, dass ich ein individuelles Eingangselement zu einer ngControl Eigenschaft binden und es wird der Überblick über seine eigene Gültigkeit behalten. Die formGroup wäre nur ein schneller Weg, um alle Kontrollen zu überprüfen, wird aber nicht benötigt. Richte ich das nicht richtig auf oder verpasse ich grundsätzlich etwas mit meiner Denkweise?

Answer 1

können Sie ngFormControl verwenden, wie unten und wie in diesem plunk:

@Component({ 
    selector: "login-form", 
    directives:[NgFormControl], 
    template: ` 
     <div> 
      <input type="text" [ngFormControl]="usernameControl" [ngClass]="{'has-error': !usernameControl.valid}" /> 
      <input type="password" [ngFormControl]="passwordControl" [ngClass]="{'has-error': !passwordControl.valid}"/> 
     </div> 
    ` 
}) 
export class VenueCard{ 
    ... 
}