Angular 2 verschachtelte Formulargruppe enthält Nullwerte

Question

Ich arbeite mit einer verschachtelten Form Gruppenstruktur mit Angular 2 Beta "FormBuilder" und für das Leben von mir kann ich nicht Werte in die verschachtelte Form Gruppe erhalten. Es ist seltsam, weil die Bindung gut funktioniert. Ich kann ein "Benutzer" -Objekt an das Formular senden und es füllt alle Werte für den Benutzer und ihre Adresse aus. Aber wenn man den Formularwert ausgibt (zB an eine HttpPost), sieht es genauso aus wie das Objekt darunter ...

FWIW Ich folge Mosh Hamedanis exzellentem Angluar 2 Kurs auf Udemy und habe das überprüft und doppelt überprüft relevanter Code stimmt mit seinem hier überein: https://github.com/mosh-hamedani/angular2-course

Vielleicht, was ich brauche, soll gesagt werden, wo sonst in meinem Code zu suchen?

Hier ist meine Formulargruppe wie gezeigt durch {{form.value | json}} am Ende meine Form:

{ 
"name": "Leanne Graham", 
"email": "Sincere@april.biz", 
"phone": "1-770-736-8031 x56442", 
"address": { 
    "street": null, 
    "suite": null, 
    "city": null, 
    "zipcode": null 
    } 
} 

dies ist der Konstruktor in meiner Komponente:

constructor(
     fb: FormBuilder, 
     private router: Router, 
     private usersService: UsersService, 
     private params: RouteParams 
    ){ 
     this.form = fb.group({ 
      name: ['', Validators.required], 
      email: ['', EmailValidators.mustBeEmail], // I hadn't considered the obvious: if it doesn't exist it also doesn't qualify as email. 
      phone: [], 
      address: fb.group({ 
       street: [], 
       suite: [], 
       city: [], 
       zipcode: [] 
      }) 
     }); 
    } 

Dies ist die Form, in meiner Vorlage (der Kürze halber verkürzt):

<div class="col-md-6 well"> 
     <!--the "fieldset" element is needed for this kind of grouped layout.--> 
     <form [ngFormModel]="form" (ngSubmit)="save()"> 
      <fieldset> 
       <legend>User</legend> 
       <div class="form-group"> 
        <label>Name</label> 
        <input type="text" [(ngModel)]="user.name" ngControl="name" #name="ngForm" class="form-control"> 
        <div class="alert alert-danger" *ngIf="name.errors && name.touched"> 
         The user name is required. 
        </div> 
       </div> 
       *** Email and Phone similar *** 
      </fieldset> 
      <fieldset ngControlGroup="address"> 
       <legend>Address</legend> 
       <div class="form-group"> 
        <label>Street</label> 
        <input type="text" [(ngModel)]="user.address.street" ng-control="street" class="form-control"> 
       </div> 
       *** suite, city, and zip similar *** 
      </fieldset> 
      {{ form.value | json }} 
      <button [disabled]="!form.valid" class="btn btn-primary" type="submit">Save</button> 
     </form> 
    </div> 

Answer 1

ng-control="street" 

sollte

ngControl="street" 

wie Sie mit name