发布表格

Question

当我提交表单选择列表值时，我正在尝试提交包含2个输入字段和一个选择列表的表单。我现在知道我在哪里做错了。我将此表单发布到API但是所有值都正确而不是选择列表值。

HTML

＆＃13;

＆＃13;

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="InviteUserForm" (ngSubmit)="Invite(InviteUserForm.value)">

                    <div class="input-group margin-bottom-20">
                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                        <input type="text" [(ngModel)]='inviteUser.username'class="form-control" id="username" placeholder="Name" autofocus
                               [ngFormControl]="InviteUserForm.controls['username']"
                               #username="ngForm" />
                    </div>
                    <div class="input-group margin-bottom-20">
                        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                        <input type="email" [(ngModel)]='inviteUser.email' class="form-control" id="email" placeholder="Email" autofocus
                               [ngFormControl]="InviteUserForm.controls['email']"
                               #email="ngForm" />
                    </div>

                    <div class="input-group margin-bottom-20">
                        <span class="input-group-addon"><i class="fa fa-glass"></i></span>
                        <select [(ngModel)]='inviteUser.partner' class="form-control" [ngFormControl]="InviteUserForm.controls['partner']"
                               #partner="ngForm">
                            <option *ngFor="let p of _partners" [value]="p.Id">{{p.Name}}</option>
                        </select>
                    </div>
                    <button type="button" class="btn-u btn-u-default margin-right-5" data-dismiss="modal">Close</button>
                    <button type="submit" [disabled]="!InviteUserForm.valid" class="btn-u pull-right">Invite</button>
                </form>

＆＃13;

＆＃13;

＆＃13;

成分

import { Component, Inject } from '@angular/core';
import { NgForm }    from '@angular/forms';
import { FORM_PROVIDERS, ControlGroup, FormBuilder, Validators } from '@angular/common';
import {UserService} from '../../services/user.service';
import {OnInit} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import { Router }  from '@angular/router';
import { HttpHelper} from '../../utils/httphelper.utils';
import 'rxjs/Rx';
import {InviteModel} from '../../models/invite.model';
@Component({
    selector: 'invite-user',
    templateUrl: '../../app/components/user/invite-user.html',
    providers: [UserService, HttpHelper]
})

export class InviteUserComponent {
    InviteUserForm: ControlGroup;
    private _partners: Observable<any[]>;
    private name: string;
    private email: string;
    private partner: number;
    private _data: Observable<any[]>;
    inviteUser: InviteModel;

    constructor(
        @Inject(FormBuilder) public formBuilder: FormBuilder,
        @Inject(UserService) private _userService: UserService) {

        this.inviteUser = new InviteModel();
        this.InviteUserForm = this.formBuilder.group({
            'username': [this.inviteUser.username, Validators.required],
            'email': [this.inviteUser.email, Validators.required],
            'partner': [this.inviteUser.partner, Validators.required]
        });
    }
    ngOnInit() {
        this._userService.partners()
            .subscribe(data => this._partners = data,
            error => {
                console.log("error while retriving partners");
                this._userService.handleError(error);
            }
            );
    }

    Invite(inviteUser) {
        console.log(inviteUser);
        this._userService.inviteUser(inviteUser)
            .subscribe(data => {
                console.log(data);
                this._data = data;
            },
            error => {
                console.log("error while retriving partners");
                this._userService.handleError(error);
            });
    }
}

模型

export class InviteModel {

    public username: string;
    public email: string;
    public partner: number;

}

图像

Answer 1

我相信您使用的[value]只是value属性，它将值存储为string。因此，在分配值partner时，它会默默地失败（我猜）。

我建议您使用[ngValue]（保留其类型的值）而不是[value]