javascript - 表单组件.html :8 ERROR TypeError: Cannot read property 'userName' of undefined

Question

我正在开发 Angular 7 并遵循 form.component.html 代码:

{{ 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代码

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

当我编译时，我收到错误“userName”未定义。

Answer 1

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

在每个输入字段中使用它都会起作用。