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

Solution 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

Solution 2:

Unfortunately 'undefined' isn't allowed, you need to set each property to 'null'.

You can convert properties before calling setValue with something like this:

   // 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);

Watch out because JSON.stringify() will remove undefined, and so if you use that to send a value back to your server you need to make sure it can handle missing properties there.

Alternative way, and this is more of a Javascript tip than anything:

You can use ?? when setting properties to ensure they're null. This may help in some cases.

eg.

form.setValue({

   firstName: firstName ?? null,    // null if firstName === undefined
   lastName: lastName ?? null

})

This is favorable to using || since a numeric form value (and a form value can be any type) of 0 would get wiped out by this. (Since 0 || null => null and not 0).

Solution 3:

Probably the error appears because this.flightChoice.DestinationId === undefined and you try to set undefined to the Destination field on the form.

Check if api is correctly downloading data to this.flightChoice.