2

私は、Angular 2ベータ版の「FormBuilder」でネストされたフォームグループ構造を使用していますが、私の人生では、ネストされたフォームグループに値を取得できません。バインディングがうまく機能するので、それは奇妙です。「ユーザー」オブジェクトをフォームに送信すると、ユーザーとそのアドレスのすべての値が入力されます。しかし、フォームの値を (たとえば HttpPost に) 送信すると、以下のオブジェクトのように見えます...

FWIW 私は Udemy で Mosh Hamedani の優れた Angluar 2 コースに従っており、関連するコードがここで彼と一致することを確認し、再確認しました: https://github.com/mosh-hamedani/angular2-course

おそらく、私が必要としているのは、コード内の他の場所を確認することです。

{{ form.value | json }} 私のフォームの最後に：

{
 "name": "Leanne Graham",
 "email": "Sincere@april.biz",
 "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>
4

1 に答える 1

0 
 ng-control="street"

する必要があります

 ngControl="street"

あなたがしたようにname

于 2016-06-11T18:31:14.563 に答える