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="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/