Kann nicht Eigenschaft ‚Name‘ von undefined in user.name in NewUserComponent

Question

Ich versuche Validierungen in einer Form zu implementieren zum Erstellen neuer Benutzer lesen, was das ist:

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

Und das ist die Komponente:

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: [] 
      }) 
     }); 
    } 
} 

Ich bin neu und ich folge einem Kurs. Versuchte an der Lösung zu suchen, etwas zu finden, aber es gibt mir immer folgende Fehlermeldung:

EXCEPTION: TypeError: Cannot read property 'name' of undefined in [user.name in NewUserComponent@7:27]

Answer 1

Wenn Sie an ein Modell binden mit ngModel die Eigenschaft hat existieren:

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: [] 
      }) 
     }); 
    } 
}