Angular - How to fix Property 'x' does not exist on type 'y'.ngtsc(2339)

I'm new to angular & receiving this error on HTML [(ngModel)]:

Property 'firstName' does not exist on type 'UserModel'.ngtsc(2339)

I am not able to solve the error & already tried rebuild,nx serve(failed),restart. (tried: Angular - How to fix 'property does not exist on type' error?)

HTML:

<body class="main-bg">
    {{diagnostic}}
    <div class="signup-container text-c animated flipInX">
                <h3 class="text-whitesmoke">Sign In</h3>
            <div class="container-content">
                <form class="margin-t"  #signupForm = "ngForm" (ngSubmit) = "onSubmit(signupForm)">
                  
                    <div class="form-group">
                        <input type="text" #firstName="ngModel" class="form-control" name="firstName" placeholder="First Name" required *[(ngModel)]="userModel.firstName"* minlength="3">
                        <span *ngIf="firstName.invalid && firstName.touched" class="error">First Name is Inavlid</span>
                    </div>
                    <div class="form-group">
                        <input type="text" #lastName="ngModel" class="form-control" name="lastName" placeholder="Last Name" required *[(ngModel)]="userModel.lastName"* minlength="3">
                        <span *ngIf="lastName.invalid && lastName.touched" class="error">email Id is Inavlid</span>
                    </div>
                    <div class="form-group">
                        <input type="text" #emailId="ngModel" class="form-control" name="emailId" placeholder="emailId" required *[(ngModel)]="userModel.emailId"* minlength="3">
                        <span *ngIf="emailId.invalid && emailId.touched" class="error">email Id is Inavlid</span>
                    </div>
                    <div class="form-group">
                        <input type="password"  #password="ngModel"  class="form-control" name="password" placeholder="*****"  required *[(ngModel)]="userModel.password"* minlength="3">
                        <span *ngIf="password.invalid && password.touched" class="error">password is Inavlid</span>
                    </div>
                    <button type="submit" class="form-button button-l margin-b" [disabled] ='signupForm.invalid'>Sign In</button>
                    </form>
                <p class="margin-t text-whitesmoke"><small> Your Name &copy; 2021</small> </p>
            </div>
        </div>
</body>

TS File:

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UserService } from '../../../user.service';
import { UserModel } from './../../userModel'; 

@Component({
  selector: 'learning-ui-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
  userModel:UserModel = new UserModel('firstName','lastName','EmailId','Password');
  message:any;

  constructor(private service:UserService) { }

  ngOnInit(): void {
  }
  public onSubmit(signupForm:NgForm){
    const response = this.service.sendSignupData(this.userModel);
  }

  get diagnostic() { return JSON.stringify(this.userModel); }
}

UserModel.ts:

export class UserModel{
    constructor(
        firstName:String,
        lastName:String,
        emailId:String,
        password:string

    ){}
}

Solution

Maybe this error is showing to you because your model needs to be defined correctly, like this:

export class UserModel{
        firstName:string
        lastName:string
        emailId:string
        password:string

    constructor(
        firstName:string,
        lastName:string,
        emailId:string,
        password:string

    ){
    this.firstName = firstName
    this.lastName = lastName
    this.emailId = emailId
    this.password = password
    }
}

Please, try it and say to me if this solution has some error