Angular unit testing Type Error: Cannot read properties of undefined (reading 'get')

Question

I am trying to mock the signup service, where the signup component consists of multiple form but getting the error as title(i.e. TypeError: Cannot read properties of undefined (reading 'get') at .ts file get userRegisterGroup()).How can I validate the controles of RegisterGroup** and codeVerifyGroup in .spec file

signup.spec

const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
const signUpServiceSpy = jasmine.createSpyObj('signUpService', ['signUp']);

describe('SignIn Component Isolated Test', () => {
  let component: SignupComponent;
  let fixture: ComponentFixture<SignupComponent>;

  beforeEach(() => {
    component = new SignupComponent(new FormBuilder(), routerSpy, signUpServiceSpy);
  });

  it('Component successfully created', () => {
    expect(component).toBeTruthy();
  });

  it('component initial state', () => {
    expect(component.registerSubmitted).toBeFalsy();
    expect(component.userRegisterGroup()).toBeDefined();
  });
});

singup.ts

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      userRegisterGroup: this.formBuilder.group({
        name: ['', [
          Validators.required,
          Validators.minLength(3),
          Validators.maxLength(20)
        ]],
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(40)]],
      }),
      codeVerifyGroup: this.formBuilder.group({
        code: ['', Validators.required]
      })
    });
  }

  get f() {
    return (<FormGroup>this.registerForm.get('userRegisterGroup')).controls;
  }

  get c() {
    return (<FormGroup>this.registerForm.get('codeVerifyGroup')).controls;
  }

  get userRegisterGroup() {
    return this.registerForm.get('userRegisterGroup');
  }

  get codeVerifyGroup() {
    return this.registerForm.get('codeVerifyGroup');
  }

singup.html

<form [formGroup]="userRegisterGroup" (ngSubmit)="signUp()" *ngIf="!isConfirm">
  <div class="form-group mb-3" id="username-container">
    <label for="name" class="form-label required">Username</label>
    <input type="name" id="name" formControlName="name" class="form-control"
           placeholder="Enter Username"
           [ngClass]="{ 'is-invalid': registerSubmitted && f.name.errors}"/>

    <div id="username-error-msg" *ngIf="registerSubmitted && f.name.errors"
         class="invalid-feedback" class="errorMsg">
      <div id="blank-username-error" *ngIf="f.name.errors.required" class="errorMsg">
        Please enter username.
      </div>
      <div id="blank-username-minlength-error" *ngIf="f.name.errors.minlength"
           class="errorMsg">useranme sholud have minimum 3 characters.
      </div>
      <div id="blank-username-maxlength-error" *ngIf="f.name.errors.maxlength"
           class="errorMsg">useranme sholud have minimum 40 characters.
      </div>
    </div>
  </div>
  <div class="form-group mb-3" id="email-container">
    <label for="email" class="form-label required">Email</label>
    <input type="email" id="email" formControlName="email" class="form-control "
           placeholder="Enter user email address" [(ngModel)]="user.email"
           [ngClass]="{ 'is-invalid': registerSubmitted && f.email.errors}"/>
    <div id="email-error-msg" *ngIf="registerSubmitted && f.email.errors"
         class="invalid-feedback" class="errorMsg">
      <div id="blank-email-error" *ngIf="f.email.errors.required" class="errorMsg">Please
        enter username.
      </div>
      <div id="blank-email-valid-error" *ngIf="f.email.errors.email" class="errorMsg">
        Please enter a valid email address.
      </div>
    </div>
  </div>

  <div class="form-group mb-3" id="password-container">
    <label for="password" class="form-label required">Password</label>
    <input [type]="user.showPassword ? 'text' : 'password'" id="password"
           formControlName="password" class="form-control " id="password" value="Default value"
           placeholder="Enter Password"
           [ngClass]="{ 'is-invalid': registerSubmitted && f.password.errors}"/>
    <div id="password-error-msg" *ngIf="registerSubmitted && f.password.errors"
         class="invalid-feedback" class="errorMsg">
      <div id="blank-password-error" *ngIf="f.password.errors.required" class="errorMsg">
        Please enter password.
      </div>
      <div id="blank-password-passworderror" *ngIf="f.password.errors.password"
           class="errorMsg">Please enter valid password.
      </div>
      <div id="blank-password-minlength" *ngIf="f.password.errors.minlength"
           class="errorMsg">Passwprd should have mimimum 0f 8 characters.
      </div>
      <div id="blank-password-maxlength" *ngIf="f.password.errors.minlength"
           class="errorMsg">Passwprd should have maximum 0f 40 characters.
      </div>
    </div>
  </div>

  <div class="form-group" id="signup-btn-container">
    <button type="submit" class="form-control login-btn mb-3" [disabled]="loading">
                                            <span class="spinner-border spinner-border-sm" role="status"
                                                  aria-hidden="true"
                                                  *ngIf="loading"></span>
      Registration
    </button>
  </div>

  <div class="signup">Are you already a member? <a [routerLink]="['/login']"
                                                   class="text-primary">Login</a>
  </div>
</form>
<!-- Code verfication -->
<form [formGroup]="codeVerifyGroup" (ngSubmit)="confirmSignUp()" *ngIf="isConfirm">
  <div class="form-group" id="code-btn-container">
    <label for="code" class="form-label required">Code</label>
    <input type="text" id="code" formControlName="code"
           class="form-control " [ngClass]="{ 'is-invalid': codeSubmitted && c.code.errors}"
           placeholder="Enter the code..."/>
    <div id="username-error-msg" *ngIf="codeSubmitted && c.code.errors"
         class="invalid-feedback" class="errorMsg">
      <div id="blank-code-error" *ngIf="c.code.errors.required" class="errorMsg">Please
        enter code.
      </div>
    </div>
  </div>
  <div class="form-group" id="codeVerify-btn-container">
    <button type="submit" class="form-control login-btn mb-3 mt-3" [disabled]="loading">
                                            <span class="spinner-border spinner-border-sm" role="status"
                                                  aria-hidden="true"
                                                  *ngIf="loading"></span>
      Confirm
    </button>
  </div>
</form>

How should I resolve it? Any code reference would help.