Angular2表单-ngControl

Question

I'm trying to use ngControl to apply error classes based on user's input.

Somehow, I can't make it to work. I see that appropriate classes are set (line ng-invalid), but when trying to use name.valid (where name is my ngControl) it doesn't work.

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]
     });
   }

}

I saw on angular.io examples that they do use it like this (just for other cases, like show/hide divs )?

Here's the simple plunker: http://plnkr.co/edit/BKx4yplIOu44tk7Mfolc?p=preview

When input field is empty, I would expect that upper div gets alert class, but that doesn't happen.

Answer 1

In fact there are three things to change in your template:

• ngClass should be [ngClass] . Otherwise the value is considered as a string and not as an expression.
• #name should be #name="ngForm" . Otherwise you reference the DOM element and not the control.
• there is no invalid property on controls in Angular2 but only a valid one.

Here is the refactored code:

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

Here is the plunkr: http://plnkr.co/edit/OJfb9VDqlrRH4oHXQJyg?p=preview .

Note that you can't leverage of FormBuilder with ngControl since the latter allows you to define inline form. With FormBuilder you must use ngFormControl instead.

Here is a sample:

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

See this article for more details:

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