Angular – How to fix Property ‘x’ does not exist on type ‘y’.ngtsc(2339)

  angular, angular-forms

I’m new to angular & receiving this error on HTML:

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?)


<body class="main-bg">
    <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 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 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 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>
                    <button type="submit" class="form-button button-l margin-b" [disabled] ='signupForm.invalid'>Sign In</button>
                <p class="margin-t text-whitesmoke"><small> Your Name &copy; 2021</small> </p>

TS File:

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

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

  constructor(private service:UserService) { }

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

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


export class UserModel{


Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.