我尝试使用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类，但这不会发生。
答案 0 :(得分：2)
事实上，模板中有三件事需要改变：
ngClass应为[ngClass]。否则，该值将被视为字符串而不是表达式。#name应为#name="ngForm"。否则，您引用DOM元素而不是控件。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>
有关详细信息，请参阅此文章：