角反应形式错误:必须为名称为表单的控件提供一个值: [英] Angular reactive Form error: Must supply a value for form control with name:
问题描述
我以为我是新手.我正在尝试实现角度反应形式,但遇到此错误:必须为名称为Destination的形式控件提供一个值.
I premise I am very novice with angular. I am trying to implement an angular reactive form, but I am encountering this error: "Must supply a value for form control with name: Destination.
这是我的组件和html的相关部分:
This is the relevant parts of my component and my 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方法中写了一些错误,但是我不确定如何分配值
I know I am probably writing something wrong in the CreateForm method but I am not sure how to assign the values
推荐答案
如果您在formGroup
上使用setValue
,但没有为该组中的每个控件传递值,则可能会出现此错误.例如:
This error can appear if you're using setValue
on a formGroup
but not passing in a value for every control within that group. For example:
let group = new FormGroup({
foo: null,
bar: null
});
group.setValue({foo: 'only foo'}); //breaks
group.setValue({foo: 'foo', bar: 'bar'}); //works
如果您确实只想更新组中的控件的 some ,则可以使用patchValue
代替:
If you truly want to only update some of the controls on the group, you can use patchValue
instead:
group.patchValue({foo: 'only foo, no problem!'});
setValue
和patchValue
的文档此处
这篇关于角反应形式错误:必须为名称为表单的控件提供一个值:的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!