Angular 反应形式中的对象可能为“null”

Question

我需要你的帮助！我是 Angular Reactive Forms 的新手，我正在尝试使用 Angular 的 Reactive Forms 制作简单的表单并进行验证。但是我的代码的这一部分出现错误（ngIf directive, property \'invalid\'):

\n

<div class="container">\n  <form class="card" [formGroup]="form" (ngSubmit)="submit()">\n    <h1>Angular Forms</h1>\n\n    <div class="form-control">\n      <label>Email</label>\n      <input type="text" placeholder="Email" formControlName="email">\n      <div\n        *ngIf="form.get(\'email\').invalid" \n        class="validation">\n      </div>\n    </div>\n\n    <div class="form-control">\n      <label>\xd0\x9f\xd0\xb0\xd1\x80\xd0\xbe\xd0\xbb\xd1\x8c</label>\n      <input type="password" placeholder="\xd0\x9f\xd0\xb0\xd1\x80\xd0\xbe\xd0\xbb\xd1\x8c" formControlName="password">\n      <div class="validation"></div>\n    </div>\n\n    <div class="card">\n      <h2>\xd0\x90\xd0\xb4\xd1\x80\xd0\xb5\xd1\x81</h2>\n\n      <div class="form-control">\n        <label>\xd0\xa1\xd1\x82\xd1\x80\xd0\xb0\xd0\xbd\xd0\xb0</label>\n\n        <select>\n          <option value="ru">\xd0\xa0\xd0\xbe\xd1\x81\xd1\x81\xd0\xb8\xd1\x8f</option>\n          <option value="ua">\xd0\xa3\xd0\xba\xd1\x80\xd0\xb0\xd0\xb8\xd0\xbd\xd0\xb0</option>\n          <option value="by">\xd0\x91\xd0\xb5\xd0\xbb\xd0\xb0\xd1\x80\xd1\x83\xd1\x81\xd1\x8c</option>\n        </select>\n      </div>\n\n      <div class="form-control">\n        <input type="text">\n      </div>\n\n      <button class="btn" type="button">\xd0\x92\xd1\x8b\xd0\xb1\xd1\x80\xd0\xb0\xd1\x82\xd1\x8c \xd1\x81\xd1\x82\xd0\xbe\xd0\xbb\xd0\xb8\xd1\x86\xd1\x83</button>\n    </div>\n\n    <div class="card">\n      <h2>\xd0\x92\xd0\xb0\xd1\x88\xd0\xb8 \xd0\xbd\xd0\xb0\xd0\xb2\xd1\x8b\xd0\xba\xd0\xb8</h2>\n      <button class="btn" type="button">\xd0\x94\xd0\xbe\xd0\xb1\xd0\xb0\xd0\xb2\xd0\xb8\xd1\x82\xd1\x8c \xd1\x83\xd0\xbc\xd0\xb5\xd0\xbd\xd0\xb8\xd0\xb5</button>\n      <div class="form-control">\n        <label></label>\n        <input type="text">\n      </div>\n    </div>\n\n    <button class="btn" type="submit" [disabled]="form.invalid">\xd0\x9e\xd1\x82\xd0\xbf\xd1\x80\xd0\xb0\xd0\xb2\xd0\xb8\xd1\x82\xd1\x8c</button>\n\n  </form>\n</div>\n

\n

打字稿代码：

\n

import { Component, OnInit } from \'@angular/core\';\nimport { FormControl, FormGroup, Validators } from \'@angular/forms\';\n\n@Component({\n  selector: \'app-root\',\n  templateUrl: \'./app.component.html\',\n  styleUrls: [\'./app.component.less\']\n})\nexport class AppComponent implements OnInit {\n  title = \'forms\';\n  form!: FormGroup;\n\n  ngOnInit() {\n    this.form = new FormGroup({\n      email: new FormControl(\'\',\n        [Validators.email,\n         Validators.required]),\n      password: new FormControl(null,\n        [Validators.required,\n         Validators.minLength(8)])\n    })\n  }\n\n  submit() {\n    console.log(\'Form submitted\', this.form);\n    const formData = { ...this.form.value };\n\n    console.log(\'Form Data:\', formData);\n\n  }\n}\n

\n

我使用 Angular 12 并且遵循 Udemy 上的指南，所以这很奇怪，因为我导师的代码工作正常。我创建了 FromGroup 和 FormControls，并给了它们名称，所以我对这个错误感到非常困惑。你有什么想法我该如何解决它吗？

\n

Answer 1

该Object is possibly 'null'错误可能是由于严格的类型检查而发生的，可以通过两种方式解决：

• !要么通过使用(not null 断言运算符)断言您绝对确定永远不会为 null
• 使用?（可选链接运算符）在对象确实为空的情况下阻止最终错误的发生

所以你可以if用 and 替换该语句form.get('email')?.invalid，它应该可以工作。这里也提出了类似的问题。