Angular reactive Form error: Must supply a value for form control with name:

Question

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.

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> 

I know I am probably writing something wrong in the CreateForm method but I am not sure how to assign the values

Answer 1

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: new FormControl(''),    bar: new FormControl('') }); group.setValue({foo: 'only foo'}); //breaks group.setValue({foo: 'foo', bar: 'bar'}); //works 

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!'}); 

Docs for setValue and patchValue here