Angular 角度：无法读取属性'；控件'；未定义的

我是Angular的新手，我正在学习这个在线教程。当我试图在表单中添加一些样式时，我总是遇到这个错误。你们有解决办法吗

ERROR TypeError: Cannot read property 'controls' of undefined
at Object.eval [as updateDirectives] (RegisterComponent.html:14)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
at checkAndUpdateView (core.js:13844)
at callViewAction (core.js:14195)
at execComponentViewsAction (core.js:14127)
at checkAndUpdateView (core.js:13850)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)

这是我的RegisterComponent.html

<h1 class="page-header">Registreer</h1>

<form [formGroup]="form" (submit)="onRegisterSubmit()">

  <div class="form-group">
    <label for="username">Username</label>
    <div>
      <input type="text" name="username" class="form-control" autocomplete="off" placeholder="*Username" formControlName="username"/>
    </div>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <div [ngClass]="{'has-error': (form.controls.email.errors && forms.controls.email.dirty), 'has-succes': !form.controls.email.errors}">
      <input type="text" name="email" class="form-control" autocomplete="off" placeholder="*Email" formControlName="email"/>
      <ul class="help-block">
          <li>Je moet een email invullen</li>
        </ul>
    </div>
  </div>

  <div class="form-group">
    <label for="password">Wachtwoord</label>
    <div>
      <input type="password" name="password" class="form-control" autocomplete="off" placeholder="*Wachtwoord" formControlName="password"/>
    </div>
  </div>

  <div class="form-group">
    <label for="confirm">Bevestig wachtwoord</label>
    <div>
      <input type="password" name="confirm" class="form-control" autocomplete="off" placeholder="*Bevestig wachtwoord" formControlName="confirm"/>
    </div>
  </div>

  <input type="submit" class="btn btn-primary" value="Registreer" />

</form>

---

我只是跟着教程走，所以我的组件还没有完成。但据盖伊说，在这个阶段，它应该适用于电子邮件。

问题在于这一行：

<div [ngClass]="{'has-error': (form.controls.email.errors && forms.controls.email.dirty), 'has-succes': !form.controls.email.errors}">

---

基本上，对象

forms

是未定义的。

您不需要使用

ngClass

根据表单有效性设置表单样式。Angular为您添加了一些非常有用的类

---

查看。

我正在和您的进行游戏，并检查您是否有一件小事情需要修复：

在模板中键入“表单”而不是“表单”

检查以下解决方案：

---

forms.controls.email.dirty
中的表单应该是表单。@yurzui:是的，这就是问题所在。它没有在组件ts文件中定义。@Ian Martens您定义的
form
not
forms
我找到了它。这是一个打字错误，必须是form.controls.email.dirty而不是forms.controls.email。dirty@IanMartens把这个答案标记为解决方案，如果它有帮助的话
<div [ngClass]="{'has-error': (form.controls.email.errors && forms.controls.email.dirty), 'has-succes': !form.controls.email.errors}">