Angular2 Forms - ngControl

Question

我試圖使用ngControl根據用戶的輸入應用錯誤類。

不知何故，我不能讓它工作。我看到設置了適當的類（行ng無效），但是當試圖使用name.valid（其中name是我的ngControl）時，它不起作用。

HTML：

<div ngClass="{alert: name.invalid}"> 
     <label for="name">Name</label> 
     <input ngControl="name" #name id="name" [(ngModel)]="user.name"/> 
    </div> 

</div> 

JS

export class App { 
    userForm: any; 
    user: any; 

    constructor(
    private _formBuilder: FormBuilder) { 

    this.user = {name: 'Ben'}; 
    this.userForm = this._formBuilder.group({ 
     'name': ['', Validators.required] 
    }); 
    } 

} 

我對angular.io例子中看到，他們使用這樣的（只是對於其它情況，如顯示/隱藏divs）？

這裏的簡單plunker：http://plnkr.co/edit/BKx4yplIOu44tk7Mfolc?p=preview

當輸入字段爲空，我預計上div得到alert類，但這並沒有發生。

Answer 1

事實上，有三件事情在你的模板改變：

• ngClass應該[ngClass]。否則，該值被視爲一個字符串，而不是一個表達式。
• #name應該是#name="ngForm"。否則，您引用DOM元素而不是控件。
• 在Angular2中沒有invalid控件屬性，但只有一個valid之一。

這裏是重構的代碼：

<div [ngClass]="{alert: !name.valid}"> 
    <label for="name">Name</label> 
    <input ngControl="name" #name="ngForm" 
     required id="name" [(ngModel)]="user.name"/> 
</div> 

這裏是plunkr：http://plnkr.co/edit/OJfb9VDqlrRH4oHXQJyg?p=preview。

請注意，您不能利用FormBuilder和ngControl，因爲後者允許您定義內聯表單。使用FormBuilder您必須改用ngFormControl。

這裏有一個例子：

<div [ngClass]="{alert: !userForm.controls.name.valid}"> 
    <label for="name">Name</label> 
    <input [ngFormControl]="userForm.controls.name" 
     id="name" [(ngModel)]="user.name"/> 
</div> 

請參閱本文的詳細信息：

• http://restlet.com/blog/2016/02/11/implementing-angular2-forms-beyond-basics-part-1/