Angular 2 ngControl無ngFormModel

Question

所以我對ngControl & ngFormModel有些困惑。在我看來，它使得如果我以編程方式聲明一個ControlGroup，我不需要有一個ngFormModel（相當html表單）明確地將所有控件綁定在一起。

考慮到下面的代碼，除非我將輸入封裝在HTML中的同一個表單對象中，並且不用它的名字來編排。

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

我期望的是，我可以綁定一個單獨的輸入元素到一個ngControl屬性，它會跟蹤它自己的有效性。 formGroup只是我檢查所有控件但不需要的快捷方式。我只是沒有正確地設置它，或者我的思維模式從根本上失去了一些東西？

Answer 1

您可以在此plunk使用ngFormControl如下又如：

@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{ 
    ... 
}