无法读取新用户组件中未定义的属性' name' user.name

Question

我正在尝试用一种创建新用户的表单来实现验证，这就是：

<div class="col-lg-7 well">
    <form [ngFormModel]="form" (ngSubmit)="save()" class="form-horizontal">
        <fieldset>
            <legend class="text-center">User</legend>
            <div class="form-group">
                <label for="name" class="col-lg-2 control-label">Name</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.name" #name="ngForm" ngControl="name" type="text" class="form-control">
                </div>
                <!-- Name Errors -->
                <span *ngIf="name.touched && name.errors.required" class="text-danger">
                    Name is required
                </span>
                <!-- / -->
            </div>
            <div class="form-group">
                <label for="email" class="col-lg-2 control-label">E-mail</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.mail" #email="ngForm" ngControl="email" type="email" class="form-control" required>
                </div>
                <!-- E-mail Errors -->
                <span *ngIf="email.touched" class="text-danger">
                    Please enter a valid e-mail
                </span>
                <!-- / -->
            </div>
            <div class="form-group">
                <label for="phone" class="col-lg-2 control-label">Phone</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.phone" type="tel" class="form-control">
                </div>
            </div>
        </fieldset>
        <fieldset ngControlGroup="address">
            <legend class="text-center">Address</legend>
            <div class="form-group">
                <label for="street" class="col-lg-2 control-label">Street</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.address.street" ngControl="street" type="text" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="suite" class="col-lg-2 control-label">Suite</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.address.suite" ngControl="suite" type="text" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="city" class="col-lg-2 control-label">City</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.address.city" ngControl="city" type="text" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="zipCode" class="col-lg-2 control-label">Zip Code</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.address.zipCode" ngControl="zipCode" type="number" class="form-control">
                </div>
            </div>
            <button [disabled]="!form.valid" type="submit" class="btn btn-primary pull-right">
                <span class="glyphicon glyphicon-ok"></span>
                Submit
            </button>
        </fieldset>
    </form>
</div>

这就是组件：

import {Component} from 'angular2/core';
import {ControlGroup, FormBuilder, Validators} from 'angular2/common';
import {UserValidators} from './../../../validators/user/userValidators';
@Component({
    templateUrl: 'app/components/users/new/new-user.component.html',
})
export class NewUserComponent {
    form: ControlGroup;
    constructor(fb: FormBuilder) {
        this.form = fb.group({
            name: ['', Validators.required],
            email: ['', UserValidators.email],
            phone: [],
            address: fb.group({
                street: [],
                suite: [],
                city: [],
                zipcode: []
            })
        });
    }
}

我是新手，正在学习一门课程。试图查看解决方案以找到一些东西，但它总是给我以下错误：

异常：TypeError：无法读取中[user.name中undefined的属性"name"NewUserComponent@7：27]

Answer 1

如果使用ngModel绑定到模型，则属性必须存在：

export class NewUserComponent {
    form: ControlGroup;
    user = {mail: 'mail', phone: 'phone', 
        address: {suite: 'suite', city: 'city', zipCode: '12345'}};
    constructor(fb: FormBuilder) {
        this.form = fb.group({
            name: ['', Validators.required],
            email: ['', UserValidators.email],
            phone: [],
            address: fb.group({
                street: [],
                suite: [],
                city: [],
                zipcode: []
            })
        });
    }
}