Angular 反应式表单验证不起作用答案

【问题标题】：Angular Reactive Form Validation Not WorkingAngular 反应式表单验证不起作用
【发布时间】：2019-11-15 06:17:14
【问题描述】：

我尝试了 Angular Reactive 表单和我的代码组件类为：Component Class file

而我的 HTML 代码是：HTML file

我在控制台中收到此错误：

core.js:15724 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'controls' of undefined
TypeError: Cannot read property 'controls' of undefined
    at new LoginComponent (login.component.ts:24)

我知道这个错误是因为这条线：

validEmail = {
    field: true,
    error: this.myForm.controls.email.invalid && this.myForm.controls.email.dirty
  };

另外，如果我尝试评论和“错误：”ngClass 对象，条件：

!myForm.invalid

在登录表单中提交按钮不起作用。

我是 Angular 的新手，文档比较笼统。所以请帮助我如何解决它。对于您的测试，请使用语义 UI 库来查看 HTML。

【问题讨论】：

可以把代码以文字的形式贴出来吗？
为了我的问题质量，我把它放在 Pastebin 中。
@Sivaramakrishnan，你总是在 ngOnInit 中创建一个表单，写成 <form *ngIf="myForm" [formGroup]="myForm"...> 这样的表单很有用。这些 *ngIf 避免了初始错误

标签： angular angular-reactive-forms

【解决方案1】：

我认为您在初始化之前访问myFrom。您没有在问题中发布代码，但我猜您在班级级别定义了 validEmail 并且当时您的表单尚未初始化

【讨论】：

那么我如何访问它来设置 ngClass 属性？我一开始就声明了，不能访问吗
在你的 html 中做，通常由 *ngIf 控制，见medium.com/front-end-weekly/…
我明白你的意思，但我不能像我在代码中所做的那样做。如果有很多款式怎么办？我不能把它作为组件类中的 ngClass 对象吗？
即使您执行myForm: FromGroup = new FormGroup({...}) 并初始化表单，错误也会消失，但您正在做的方式不起作用，因为您评估值并在开始时设置它，例如您的错误总是true，没有代码可以再次设置，这就是为什么你不应该逆着河流游泳
我确实删除了 validEmail 对象并将该对象直接添加到表单中。