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

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