In the process of building a login and registration form using Angular with .Net core, I encountered an error upon running the program. The error is showing up in the Browser Console tab.

This is my userlog.component.ts file:

import { Component, OnInit, Output , EventEmitter} from '@angular/core';
import { AccountService } from '../_services/account.service';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';



@Component({
  selector: 'app-userlog',
  templateUrl: './userlog.component.html',
  styleUrls: ['./userlog.component.css']
})


export class UserlogComponent implements OnInit {

  @Output() cancelRegister = new EventEmitter();
  registerForm: FormGroup;
  model: any = {};
  validationErrors: string[] = [];

  constructor(public accountService: AccountService, private fb: FormBuilder, private router: Router, private toastr: ToastrService) { }

  ngOnInit(): void {
    
  }

  intitializeForm() {
    this.registerForm = this.fb.group({
      username: ['', Validators.required],
      email: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(15)]],
      confirmPassword: ['', [Validators.required, this.matchValues('password')]],
      firstname: ['', Validators.required],
      dob: ['', Validators.required]
    })
  }

  register() {
    this.accountService.login(this.registerForm.value).subscribe(response => {
      this.router.navigateByUrl('/dashboard');
    }, error => {
      this.validationErrors = error;
    })
  }

  matchValues(matchTo: string): ValidatorFn {
    return (control: AbstractControl) => {
      return control?.value === control?.parent?.controls[matchTo].value 
        ? null : {isMatching: true}
    }
  }

  login() {
    this.accountService.login(this.model).subscribe(() => {
      this.router.navigateByUrl('/dashboard');    
    }, error => {
      console.log(error);
      this.toastr.error(error.error);
      
    })
  }

  logout(){
    this.accountService.logout();
    this.router.navigateByUrl('/');
  }

  cancel(){
    this.cancelRegister.emit(false);
  }

  
}

This is my userlog.component.html file:

<div class="user signinBx">
    <div class="imgBx"><img src="assets/Images/maanavar.png" alt="" /></div>
    <div class="formBx">
    <form #loginForm="ngForm" class="form-inline my-2 my-lg-0" (ngSubmit)="login()">
        <h2>Sign In</h2>
            <!-- [(ngModel)] denotes component to html (click) html to component -->
        <input class="form-control mr-sm-2" type="text" name="username" placeholder="Username" [(ngModel)]="model.username" />
        <input class="form-control mr-sm-2" type="password" name="password" placeholder="Password" [(ngModel)]="model.password"/>
        <button [disabled]="!loginForm.valid" class="btn btn-success my-2 my-sm-0" type="submit">Login</button>
        <div>
            <p class="signup ml-3">
                Don't have an account ?
                <a href="#" onclick="toggleForm();">Sign Up.</a><br>   <br>
                <a class="text-danger" href="#">Not able to access ??</a>
            </p>
        </div>
        
    </form>
    </div>
</div>
<div class="user signupBx">
    <div class="formBx">
        <!-- if a forn is ngform then type submit inside the form calls ngsubmit -->
    <form [formGroup]="registerForm" (ngSubmit)="registerForm.valid && register()" autocomplete="off">
        <div class="form-group">
            <h2>Create an account</h2>
    
        
           <input class="form-control mr-sm-2" type="text"  placeholder="Username" [formControl]='registerForm.controls["username"]'/> 
        <input class="form-control mr-sm-2" type="email"  placeholder="Your E-Mail" [formControl]='registerForm.controls["email"]' />
        <input class="form-control mr-sm-2" type="password"  placeholder="Password" [formControl]='registerForm.controls["password"]' />
        <input class="form-control mr-sm-2" type="password"  placeholder="Confirm Password" [formControl]='registerForm.controls["confirmPassword"]' />
        <input class="form-control mr-sm-2" type="text" placeholder="Firstname" [formControl]='registerForm.controls["firstname"]'/> 
        <input class="form-control mr-sm-2" type="date"  placeholder="Date of Birth" [formControl]='registerForm.controls["dob"]'/> 
        
        <div class="row" *ngIf="validationErrors.length > 0">
            <ul class="text-danger">
                <li *ngFor="let error of validationErrors">
                    {{error}}
                </li>
            </ul>
        </div>
    
          
        <button [disabled]='!registerForm.valid' class="btn btn-success mr-2 my-sm-0" type="submit">Sign Up</button>  
        <button class="btn btn-danger my-sm-0" (click)="cancel()" type="button">Cancel</button>
        <p class="signup">
        Already have an account ?
        <a href="#" onclick="toggleForm();">Sign in.</a>
        </p>
        </div>
        
    </form>
    </div>
    <div class="imgBx"><img src="assets/Images/homeSignin.jpg" alt="" /></div>
</div>

</div>

I have attempted to solve this problem by researching similar issues without success. Can someone assist me with resolving this? Thank you.