Angular 15响应式表单属性绑定报错及解决方法

报错截图 #

问题场景 #

我是Angular新手，在Angular 15中尝试将响应式表单与属性绑定时出现上述报错，尝试多种方法仍无法完成属性绑定。

相关代码 #

组件TS代码 #

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, FormsModule} from "@angular/forms";
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit{
  
  loginVal:FormGroup;

  constructor(private fb : FormBuilder ){
    this.formBinding();
  }

  ngOnInit(): void { };

  formBinding(){
    this.loginVal = this.fb.group({
      username:["testuser"],
      userpass:[""],
    });
  }

  display(){
    console.log(this.loginVal.value);
  }
}

HTML模板代码 #

<form [formGroup]="loginVal" class="form-group" (ngSubmit)="display()"> 
    <label for="">User Name:</label>
    <input formControlName="username" class="form-control">
    <label for="">Password:</label>
    <input formControlName="userpass" class="form-control">
  
    <button type="submit">Submit</button>
</form>

AppModule导入配置 #

imports: [
    BrowserModule,
    AppRoutingModule,
    MatSidenavModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],

解决方法 #

最终通过**空值断言运算符（!）**解决问题，只需修改组件中loginVal的声明：

loginVal!: FormGroup;

内容的提问来源于stack exchange，提问作者MinhajBoss