FormComponent.html：8错误TypeError：无法读取未定义的属性'userName'

Question

I am working on a angular 7 and following the form.component.html code :

{{ userForm.value | json }}

---

{{ userModel | json }}

  <div class="form-group"> <label>Name</label> <input type="text" class="form-control" name="userName" [(ngModel)]="userModel.userName"> </div> <div class="form-group"> <label>Email</label> <input type="text" class="form-control" name="email" [(ngModel)]="userModel.email"> </div> <div class="form-group"> <label>Mobile number</label> <input type="number" class="form-control" name="number" [(ngModel)]="userModel.number"> </div> <div class="form-group"> <label>Address</label> <input type="text" class="form-control" name="address" [(ngModel)]="userModel.address"> </div> <button class="btn btn-primary" type="submit">Submit Order</button> 

user.js code

export class User {
    constructor(
        public userName: string,
        public email: string,
        public number: string,
        public address: string
    ){}
}

app.component.ts:

import { Component } from '@angular/core';
import { User } from './User';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title=['Angular','Vue','React'];

  userModel = new User('ash','ash@gmail.com','01233','asasas');
}

When i compile i get the error "userName" undefined.

Answer 1

 <input formControlName="userName" placeholder="Name" class="form-control">

在每个输入字段中使用它，它将起作用。

Answer 2

Change your User class like below

export class User {
        public userName: string;
        public email: string;
        public number: string;
        public address: string;
    constructor(userName, email, number, address){
        this.userName = userName;
        this.email = email;
        this.number = number;
        this.address = address;
     }
}

have a look here for more about typescript classes.

as @Hameed Syed said cross check once again for your class import statement.

UPDATED

your code seems fine for me, any how try to use Life Cycle methods from Angular for data binding.

import { Component, OnInit } from '@angular/core';
import { User } from './User';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title=['Angular','Vue','React'];

  userModel: User;

  ngOnInit(){
    this.userModel = new User('ash','ash@gmail.com','01233','asasas');
  }
}