Question

我有这个非常讨厌的问题。让我添加我的HTML：

<div class="page">
<h1>Add user</h1>
<form [formGroup]="inviteUserForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="row">
        <div class="form-group col-lg-6">
            <label for="email">
                Email
            </label>
            <input class="form-control" id="email" formControlName="email">
        </div>
    </div>

    <div class="row">        
        <div class="form-group col-lg-6">
            <label for="roles">
                User role
            </label>
            <select class="form-control" id="roles" multiple formControlName="roles">
                <ng-container *ngFor="let role of roles">
                    <option *ngIf="role !== 5" value="{{role}}">{{role | userRole}}</option>
                </ng-container>
            </select>
        </div>
    </div>

    <div class="row">        
        <div class="form-group col-lg-6">
            <label for="account">
                Account
            </label>
            <select class="form-control" id="accounts" multiple formControlName="accounts">
                <ng-container *ngFor="let account of accounts">
                    <option [attr.selected]="activeAccount.id == account.id" 
                        value="account">{{account.name}}</option>
                </ng-container>
            </select>
        </div>
    </div>

    <button class="btn btn-primary" type="submit">Invite user</button>
</form>

控制器代码：

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Router} from "@angular/router";
import {ErrorService} from '../../../../_services/error.service';
import {UserService} from '../../../../_services/user.service';
import {AccountService} from '../../../../_services/account.service';
import {Account} from '../../../../_models/account';
import {UserType} from '../../../../_enums/user-type.enum';

@Component({
    selector: 'user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css']
})

export class UserComponent {
    inviteUserForm: FormGroup;
    userType: UserType;
    accounts: Account[];
    activeAccount: Account;
    roles: number[];

    constructor(private errorService:ErrorService,
                private formBuilder: FormBuilder,
                private userService: UserService,
                private accountService: AccountService,
                private router: Router) {}

    ngOnInit() {
        this.inviteUserForm = this.formBuilder.group({
            email: ["", [Validators.required, Validators.email]],
            accounts: [[], [Validators.required]],
            roles: [[], [Validators.required]]
        });

        this.accountService.getAccounts().subscribe(
            (accounts) => {
                this.accounts = accounts;
                this.activeAccount = this.accountService.getActiveAccount(this.accounts);
                this.inviteUserForm.controls['accounts'].setValue(this.activeAccount);
            }
        );

        this.roles = this.getUserRoles();
    }

    onSubmit() {
        if (this.inviteUserForm.valid){
            this.userService.invite(this.inviteUserForm.value).subscribe(
                () => this.router.navigate(['/settings/users']),
                (error) => this.errorService.setError(error)
            );
        }
    }

    getUserRoles(): Array<number> {
        var keys = Object.keys(UserType);
        return keys.slice(0, keys.length / 2).map(item => parseInt(item));
    }
}

我的问题是，当我选择帐户并提交帐户时，它会作为对象而不是数组发送。请参阅此代码中提交的json。

{
    "email":"test@test.com",
    "accounts":{
        "id":1,
        "name":"Test business",
        "addressLine1":"A road",
        "addressLine2":"Centrum",
        "postalCode":"12345Z",
        "postalCity":"London",
        "country":"Great Britain",
        "type":"business",
        "vatNumber":"123456123456"
    },
    "roles":["3"]
}

目前我在帐户数组中只有一个帐户。对于如何解决这个问题，有任何的建议吗？我完全不知道为什么它从form.value调用返回对象而不是带有对象的数组。

Answer 1

我将为自己的问题添加一个答案。问题出在setValue调用中。我应该添加一个包含所选对象的数组，而不仅仅是所选对象。如果其他人犯了同样的错误，我会留在这里，仅供参考。

Angular 5选择多个返回选定对象而不是选定对象的数组

1 个答案: