Forms Angular2表单-ngControl

我试图使用

ngControl

根据用户的输入应用错误类

不知怎么的，我没能成功。我看到设置了适当的类（第ng行无效），但当尝试使用

name.valid

（其中

name

是我的ngControl）时，它不起作用

html:

我在angular.io示例中看到，他们确实这样使用它（仅用于其他情况，如show/hide

divs

）

下面是简单的plunker：

---

当输入字段为空时，我希望upper

div

获得

alert

类，但这并没有发生。

事实上，模板中有三件事需要更改：

• ngClass

  应该是

  [ngClass]

  。否则，该值将被视为字符串而不是表达式

• #name

  应该是

  #name=“ngForm”

  。否则，将引用DOM元素而不是控件
• Angular2中的控件没有

  无效的

  属性，只有

  有效的

  属性

以下是重构后的代码：

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

有关更多详细信息，请参阅本文：

---

事实上，模板中有三件事需要更改：

• ngClass

  应该是

  [ngClass]

  。否则，该值将被视为字符串而不是表达式

• #name

  应该是

  #name=“ngForm”

  。否则，将引用DOM元素而不是控件
• Angular2中的控件没有

  无效的

  属性，只有

  有效的

  属性

以下是重构后的代码：

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

有关更多详细信息，请参阅本文：

---

请在问题本身中插入简化代码示例。请在问题本身中插入简化代码示例。非常感谢。我试了这么多的组合，最后我犯了一些错误。但你说得很清楚，我看到它现在起作用了。我还有一个问题。我在控制台中看到这个异常被抛出：

Uncaught（在promise中）：异常：表达式{alert:！name.valid}inApp@4：7'在检查后已更改。

我在我的应用程序中看到了它，这就是为什么我从所有更改和解决方法开始，最后在这里结束。你有什么想法，应该如何修复（在我的应用程序中，它是name.valid和name.touch的组合）。不客气！我认为您可以尝试在组件的

ngOnInit

方法中调用

ChangeDetectorRef

的

detectChanges

方法。看到这个问题：。非常感谢。我试了这么多的组合，最后我犯了一些错误。但你说得很清楚，我看到它现在起作用了。我还有一个问题。我在控制台中看到这个异常被抛出：

Uncaught（在promise中）：异常：表达式{alert:！name.valid}inApp@4：7'在检查后已更改。

我在我的应用程序中看到了它，这就是为什么我从所有更改和解决方法开始，最后在这里结束。你有什么想法，应该如何修复（在我的应用程序中，它是name.valid和name.touch的组合）。不客气！我认为您可以尝试在组件的

ngOnInit

方法中调用

ChangeDetectorRef

的

detectChanges

方法。请参见以下问题：。

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

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