Question

我以为我是新手。我正在尝试实现角度反应形式，但遇到此错误：“必须为名称为Destination的形式控件提供一个值。

这是我的组件和html的相关部分：

import { Component, Inject } from '@angular/core';
import { Http } from "@angular/http";
import { FormGroup, FormControl, FormBuilder, Validators } from "@angular/forms";

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent {

    locations: Location[];
    flightChoice: FlightChoice;
    form: FormGroup;


    constructor(http: Http, @Inject('BASE_URL') private baseUrl: string,
        private fb: FormBuilder) {

        this.createForm();

        http.get(baseUrl + 'api/FlightChoice/dest_locations').subscribe(result => {
            this.locations = result.json() as Location[];
            console.log(this.locations);

        }, error => console.error(error));

        http.get(baseUrl + 'api/FlightChoice/choice').subscribe(result => {
            this.flightChoice = result.json() as FlightChoice;
            this.updateForm();
        }, error => console.error(error));

    }

    createForm() {
        this.form = this.fb.group({
            Destination: [0],
            NrPasg: [1],
            TwoWays: [false],
            DepartureDate: ['', Validators.required],
            ReturnDate: ['', Validators.required]
        });
    }

    updateForm() {

        this.form.setValue({
            Destination: this.flightChoice.DestinationId,
            NrPasg: this.flightChoice.NrPasg,
            TwoWays: this.flightChoice.TwoWays,
            DepartureDate: this.flightChoice.DepartureDate,
            ReturnDate: this.flightChoice.ReturnDate
        });

    }

html：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
        <div>
            <label for="destination">Destination:</label>
            <br />
            <select id="destination" formControlName="Destination">
                <option *ngFor="let location of locations" value="{{ location.id }}">
                    {{ location.name }}
                </option>
            </select>
            <br />
            <label for="nrPasg">Number of Passengers:</label>
            <br />
            <input formControlName="NrPasg" type="number" id="nrPasg" value="1" />
            <label for="twoWays"></label>
            <br />
            <select id="twoWays" formControlName="TwoWays">
                <option value="false">one way</option>
                <option value="true">two ways</option>
            </select>
            <br />
            <label for="departureDate">Departure Date:</label>
            <br />
            <input formControlName="DepartureDate" type="date" id="departureDate" />
            <br />
            <label for="returnDate">Return Date:</label>
            <br />
            <input formControlName="ReturnDate" type="date" id="returnDate" />

        </div>
        <div>
            <button type="submit">Search Flights</button>

        </div>
    </form>

我知道我可能在CreateForm方法中写了一些错误，但是我不确定如何分配值

Answer 1

可能出现此错误是因为this.flightChoice.DestinationId === undefined，并且您尝试将undefined设置为表单上的Destination字段。

检查api是否正确将数据下载到this.flightChoice。

Answer 2

不幸的是，不允许使用“ undefined”，您需要将每个属性设置为“ null”。

将属性设置为undefined（在直接来自服务器时很常见）是完全合法的。

您可以在调用setValue之前通过以下方式转换属性：

   // set all 'missing' OR 'undefined' properties to null
        const newValue: any = {...value};

        for (const field in this.controls) { 

            if (newValue[field] === undefined) {
                newValue[field] = null;
            }
        }

        super.setValue(newValue, options);

请注意，因为JSON.stringify()将删除undefined，因此，如果使用该值将值 back 发送到服务器，则需要确保它可以处理丢失的属性在那里。

Answer 3

如果您在setValue上使用formGroup，但没有为该组中的每个控件传递值，则会出现此错误。例如：

let group = new FormGroup({
  foo: null, 
  bar: null
});
group.setValue({foo: 'only foo'}); //breaks
group.setValue({foo: 'foo', bar: 'bar'}); //works

如果您确实只想更新组中控件的 some ，则可以改用patchValue：

group.patchValue({foo: 'only foo, no problem!'});

setValue和patchValue here的文档

角反应形式错误：必须为名称为表单的控件提供值：

3 个答案: