从 JSON 对象 angular 10 到嵌套表单组的设置值

Question

I do have JSON object coming from backend and would like to set values for it in better way. What are the best approach I should consider?

I do know to manually set values to objects based on the key param.

Is there any other optimized way I can do this?

 //backend response "response": { "senderCode": "123", "senderName": "test2", "receiverCode": "456", "name": "test", "contactnumber": "1233333333" } //formgroup structure this.Form = this.fb.group({ receiverCompanyCode: null, // Sender Information senderInformation: this.fb.group({ senderCompanyCode: [null], senderName: [null], }), // Contact Information contactInformation: this.fb.group({ name: [null, Validators.required], telephone: [null, Validators.required], }), });

Answer 1

may be this help you

const response = {
      name: 'test',
      telephone: '1233333333'
};
this.contactInformation.setValue(response);

Answer 2

you have to manually map the data into form value

const mappedValue = {
receiverCompanyCode: response.receiverCompanyCode,
    senderInformation: {
        senderCompanyCode: response.senderCompanyCode,
        senderName: response.senderName,
    },
    contactInformation: {
        name: response.name,
        telephone: response.telephone,
    }
}
this.Form.patchValue(mappedValue);

or change the FormGroup structure and patch response value directly

this.Form = this.fb.group({
    senderCode: [null],
    senderName: [null],
    receiverCode: [null],
    name: [null],
    contactnumber: [null]
});
this.Form.patchValue(response);