为什么 angular 在 ngOnInit 中创建时说我的对象可以为空？

Question

正在组件中创建表单：

export class LoginPageComponent implements OnInit {

  form!: FormGroup

  constructor() { }

  ngOnInit() {
    this.form = new FormGroup({
      email: new FormControl(null, [Validators.required, Validators.email]),
      password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
    })
  }

}

在 html 中，我执行值输入检查

<div *ngIf="form.get('email').touched && form.get('email').invalid" class="validation">
  <small *ngIf="form.get('email').errors.required">Enter Email</small>
  <small *ngIf="form.get('email').errors.email">Enter valid Email</small>
</div>

对于出现 IDEA 形式的每一行，发誓

error TS2531: Object is possibly 'null'

据我所知，这是因为对象的创建发生在 ngOnInit 中。放一个“？”到处签名，IDEA 停止骂人：

<div *ngIf="form.get('email')?.touched && form.get('email')?.invalid" class="validation">
  <small *ngIf="form.get('email')?.errors.required">Enter Email</small>
  <small *ngIf="form.get('email')?.errors.email">Enter valid Email</small>
</div>

但是它的正确性如何？

也许这个问题有更正确的解决方法？

也许我创建的 Form Group 对象不正确？

Answer 1

使用安全导航运算符检查控件验证的代码在逻辑上没有任何错误，因为它自 3.7 版以来一直在 TypeScript 中。

我注意到的另一件事是 HTML 中控件的重复获取。

将重复的 this.form.get(..) 调用移动到 getter 中，如下所示：

get email() {
  return this.form.get('email');
}

get password() {
  return this.form.get('password');
}

和 HTML 脚本将更整洁，如 ?运算符仍然一致：

<div *ngIf="email?.touched && email?.invalid" class="validation">
  <small *ngIf="email?.errors.required">Enter Email</small>
  <small *ngIf="email?.errors.email">Enter valid Email</small>
</div>

为什么 angular 在 ngOnInit 中创建时说我的对象可以为空？

Why is angular saying my object can be null when creating in ngOnInit?

typescript

ngoninit

angular