Группа вложенных форм Angular 2 содержит нулевые значения

Я работаю со структурой группы вложенных форм с бета-версией Angular 2 «FormBuilder», и на всю жизнь я не могу получить значения во вложенной группе форм. Это странно, потому что привязка работает просто отлично. Я могу отправить объект «пользователь» в форму, и он заполняет все значения для пользователя и его адреса. Но при отправке значения формы (скажем, в HttpPost) оно выглядит так же, как объект ниже...

FWIW Я следую отличному курсу Mosh Hamedani по Angular 2 на Udemy и проверил и дважды проверил, что соответствующий код соответствует его здесь: https://github.com/mosh-hamedani/angular2-course

Возможно, мне нужно, чтобы мне сказали, где еще искать в моем коде?

Вот моя группа форм, как показано, поместив {{ form.value | json }} в конце моей формы:

{
 "name": "Leanne Graham",
 "email": "[email protected]",
 "phone": "1-770-736-8031 x56442",
 "address": {
    "street": null,
    "suite": null,
    "city": null,
    "zipcode": null
   }
}

это конструктор в моем компоненте:

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

Это форма в моем шаблоне (усеченная для краткости):

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

person Methodician    schedule 11.06.2016    source источник


Ответы (1)


 ng-control="street"

должно быть

 ngControl="street" 

как вы сделали с name

person Günter Zöchbauer    schedule 11.06.2016