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

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'}); //breaksgroup.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

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).

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.