Javascript 错误TS2531对象可能是'；空'；以角反应形式

我尝试了响应式表单验证和模板驱动的表单验证，但响应式表单验证在我尝试编译和运行时会显示这样一个错误，即null。我的角度版本是10.0.14

所以，我有component.html

<form action=""
  [formGroup]="singupForm"
  (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="">Username</label>
      <input
      type="text"
      id="userName"
      class="form-control"
      formControlName="userName"
      >
      <span
      *ngIf="username.invalid"
      class="help-block"
      >Please enter valid username!</span>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

} app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent,
],

imports: [
  BrowserModule,
  ReactiveFormsModule
],

   providers: [],
   bootstrap: [AppComponent]
   })
 export class AppModule { }

错误就是这样

   ERROR in src/app/app.component.html:16:27 - error TS2531: Object is 
   possibly 'null'.

   16           *ngIf="username.invalid"
                         ~~~~~~~ src/app/app.component.ts:6:16
   6   templateUrl: './app.component.html',
                 ~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component AppComponent.

   ** Angular Live Development Server is listening on localhost:4200, open 
     your browser on http://localhost:4200/ **

---

最后，我得到了这个错误，你可以用“？”来解决这个问题 请参阅下面的代码。Eg

 *ngIf="username?.invalid"

虽然从某种意义上说它是正确的，错误消失了，应用程序可以编译，但它并没有解决问题，也没有解释为什么会发生这种情况

问题的核心是，正如您发布的错误消息所示，类上的

username

属性可能是

null

。这是您定义它的方式：

get username () {
  return this.singupForm.get('userName')
}

事实上，如果您查看一下，您将看到返回类型是

AbstractControl | null

，只需形成签名：

get (path: Array<string|number>|string): AbstractControl | null

这告诉TypeScript：

听着，我知道我在做什么。是的，

get

可以返回

null

，但我知道它不会返回。因此，请将此值视为其类型为

FormControl

---

现在，在您的模板（以及其他任何地方）中，您可以简单地使用

{{{username.valid}}

，正如您最初打算的那样。

您可以发布更多错误以及错误发生的位置吗？哪一行显示了错误？发布错误代码。

get (path: Array<string|number>|string): AbstractControl | null

get username () {
  return this.singupForm.get('userName') as FormControl
}