I’m not convinced by the way formgroups are created in Angular.

I create forms like this:

let form = this._formBuilder.group({
              nameAditionalCtrl: [adicional.nameAditional, [Validators.required]],
              typeClientPriceCtrl: [parseInt(adicional.typeClientPrice,10), [Validators.required]],
              priceClient: [parseInt(adicional.priceClient,10), [Validators.required, Validators.maxLength(5)]],
              who: [parseInt(adicional.who,10), [Validators.required]],
              typeRelayPrice: [parseInt(adicional.typeRelayPrice,10), Validators.required],
              relayPrice: [parseInt(adicional.relayPrice,10), Validators.required, Validators.maxLength(15)]
            })

but lately I have had a large number of fields in the forms, then i started to create forms like this

this.form = this.formBuilder.group(this.data);

“data” is a variable that I define manually. This is easy for me because I use this object for multiple purposes.

data is a variable that I load from an endpoint. When I submit the form, I populate data with the form values and send this object like this.

Object.keys(this.data).forEach(prop=>{
      fd.append(prop, this.form[prop]);
    })   

But I suspect this is not the best way to manipulate a form.

Is there a cleaner way to do this avoiding repeating code?