在 angular 11 material UI 中，我收到错误 TS2531：对象可能是 'null' 在我的 html 模板中

Question

我正在使用 material UI 和反应形式。我的应用程序运行正常，我可以登录，但在我的终端 window 我收到错误 TS2531：对象可能是 'null'。我附上了下面的错误屏幕截图以供参考，还有我的登录 html 模板和组件。

我的login.component.html密码是

<div class="example-container">
  <div class="form-container">
    <form [formGroup]="loginForm" (submit)="onSubmit()">
      <mat-form-field class="form-field" appearance="outline">
        <mat-label> E-mail
        </mat-label>
        <input matInput formControlName="email" required>
        <mat-error *ngIf="loginForm.controls.email.touched && loginForm.controls.email.invalid">
          <span *ngIf="loginForm.controls.email.errors.required">This field is mandatory.</span>
          <span *ngIf="loginForm.controls.email.errors.pattern">This field is invalid.</span>
        </mat-error>
      </mat-form-field>
      <mat-form-field class="form-field" appearance="outline">
        <mat-label> Password
        </mat-label>
        <input matInput formControlName="password" type="password">
        <mat-error *ngIf="loginForm.controls.password.touched && loginForm.controls.password.invalid">
          <span *ngIf="loginForm.controls.password.errors.required">This field is mandatory.</span>
        </mat-error>
      </mat-form-field>
      <button mat-raised-button color="primary" type="submit">Log In</button>
    </form>
  </div>
</div>

我的login.component.ts代码是

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { first } from 'rxjs/operators';
import { NotificationService } from 'src/app/_services';
import { AuthService } from '../auth.service';
import { Login } from '../user';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm!: FormGroup;
  loading = false;
  submitted = false;
  error = '';
  emailRegx = /^(([^<>+()\[\]\.,;:\s@"-#$%&=]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,3}))$/;


  constructor(
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private authService: AuthService,
    private router: Router,
    private notifyService: NotificationService
  ) {
  }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: ["", [Validators.required, Validators.pattern(this.emailRegx)]],
      password: ["", Validators.required]
    });
  }

  get f() { return this.loginForm.controls; }

  onSubmit() {

    this.submitted = true;

    if (this.loginForm.invalid) {
      return;
    }

    this.loading = true;

    let login: Login = { Email: this.f.email.value, Password: this.f.password.value }

    this.authService.signIn(login)
      .pipe(first())
      .subscribe({
        next: () => {
          this.router.navigateByUrl('/landing');
        },
        error: error => {
          this.error = error;
          this.loading = false;
          this.notifyService.showError(this.error, this.error)
        }
      });
  }
}

我的应用程序运行正常，但在终端中出现以下错误

有人可以帮忙吗

Answer 1

所以，最初 loginForm 是未定义的。尝试添加 loginForm?.control?...

同error，默认没有错误，

还应添加：errors?.required

在 angular 11 material UI 中，我收到错误 TS2531：对象可能是 'null' 在我的 html 模板中

In angular 11 material UI I am getting error TS2531: Object is possibly 'null' in my html template

angular

typescript

angular11