getting error on creating reactive forms module in angular 15

Question

The error i am getting:

I am new on angular. now getting this error when i am binding form with the property.

here is the code of my app

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);
  }

}

here is the 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>

imports on appmodule.ts

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

tried in many ways but failed to bind the property

Update Note: this Problem is solved using "!" (Null assertion) operator