0

Why do I keep on having the error of Cannot read property 'UserName' of undefined when I have defined it in my Component. Using the 'elvis operator' in the html code does not do the trick. Please look at my code on where I get this error:

user.model.ts

export class User {
    UserName: string;
    Password: string;
    Email: string;
    FirstName: string;
    LastName: string;
}

sign-up.component.ts

export class SignUpComponent implements OnInit {

  user: User;

  constructor() { }

  ngOnInit() {
  }

}

sign-up.component.html

<form class="col s12 white" #userRegistrationForm="ngForm">

<div class="row">
    <div class="input-field col s6">
        <input class="validate" type="text" name="UserName" #UserName="ngModel" [(ngModel)]="user.UserName" required  minlength="3">
        <label>Username</label>
    </div>

    <div class="input-field col s6">
    <input type="password" name="Password" #Password="ngModel" [(ngModel)]="user.Password"> 
    <label>Password</label>
    </div>
</div>

<div class="row">

</div>

</form>

Using the elvis operator: <input class="validate" type="text" name="UserName" #UserName="ngModel" [(ngModel)]="user?.UserName" required minlength="3">

stack questions
  • 862
  • 2
  • 15
  • 29
  • 1
    So where *are* you expecting the user data to come from? – jonrsharpe Apr 16 '18 at 10:29
  • Possible duplicate of [Angular 2: TypeError: l\_thing0 is undefined in \[{{thing.title}} in AppComponent@4:44\]](https://stackoverflow.com/questions/34833358/angular-2-typeerror-l-thing0-is-undefined-in-thing-title-in-appcomponent) – Igor Apr 16 '18 at 10:31
  • Possible duplicate of [Angular2: Cannot read property 'name' of undefined](https://stackoverflow.com/q/39755336/1260204) – Igor Apr 16 '18 at 10:32

4 Answers4

0

You need to initialise the user object, just assign a new user object

user: User = new User();
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
0

Seen as though you are using export class User ... you can simply do user: User = new User();

mast3rd3mon
  • 8,229
  • 2
  • 22
  • 46
  • This isn't best practice to do since you are using new operator which tightly couples the code. Using User as a service and injecting it in constructor would be the correct way. Please check my answer for detail. – Dheeraj Kumar Apr 16 '18 at 10:34
  • that isnt the best/correct way, providers are for creating singletons in terms of services, not for interfaces/classes – mast3rd3mon Apr 16 '18 at 10:34
  • If not then how you intend to make a class not tightly coupled with a component. This is about perception my friend :) Please read about inversion of control and dependency injection. – Dheeraj Kumar Apr 16 '18 at 10:37
  • i never mentioned coupling, and i am not your _friend_ – mast3rd3mon Apr 16 '18 at 10:42
  • Well you should consider coupling while writing code. That is the best practice. – Dheeraj Kumar Apr 16 '18 at 10:45
  • @MdAlamin chance s are, you are doing something wrong/different, this works for me in angular 7 – mast3rd3mon Mar 04 '19 at 09:14
-1

New you'r model at the time of declaring.

instead of 

user: User;

Write

user: User = new User();

Best practice for declaring variable as model in angular is to New variable at the time of declaration except of sometime.

Arash
  • 1,692
  • 5
  • 21
  • 36
  • this is a copy of other answers – mast3rd3mon Apr 16 '18 at 11:29
  • @mast3rd3mon I didn't copy anything , I wrote the right answer and after it when i saw you wrote the right also I voted up you'r answer bro. anyway it was accidentally. please notice that stack is not a war field , it's just a place for programmers to help each other. – Arash Apr 16 '18 at 11:34
-2

Although this is not waht you should do as per best practices

In your model.ts, You can initialize the properties.

        export class User 
      {
        UserName: string="";
        Password: string="";
        Email: string="";
        FirstName: string="";
        LastName: string="";
      }

Best way would be to inject the User into your component.

providers:[User]

constructor(private user:User);

As prerequisite to this you should decorate your class as @Injectable()

Dheeraj Kumar
  • 3,917
  • 8
  • 43
  • 80