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 nam

Answer 1

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

It's perfectly legitimate to have a property set to undefined, common when coming directly from the server.

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.