Angular2表單-ngControl

Question

我正在嘗試使用ngControl來基於用戶的輸入應用錯誤類。

不知何故，我無法使其正常工作。 我看到已經設置了適當的類（ng-invalid行），但是當嘗試使用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示例中看到他們確實像這樣使用它（僅在其他情況下，例如show / hide divs ）？

這是簡單的插件： http ://plnkr.co/edit/BKx4yplIOu44tk7Mfolc?p=preview

當輸入字段為空時，我希望上層div獲得alert類，但是不會發生。

Answer 1

實際上，模板中需要更改三件事：

• ngClass應該是[ngClass] 。 否則，該值將被視為字符串而不是表達式。
• #name應該是#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>

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

請注意，您不能通過ngControl 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/