Patch array of values to Reactive Form

Question

I have a JSON response coming back from the server that is an assessment object with an array of questions. I need to path the values to my reactive form. This patch value function is working when there is only 1 question:

this.caseAssessmentForm.patchValue({
  ID: assessment.templateID,
  name: assessment.name,
  type: assessment.typeName,
  status: "Not Started",
  description: assessment.description,
  questions: {
    questionScore: '',
    questionAnswer: '',
    questionGoal: assessment.templateQuestions[0].goal,
    questionName: assessment.templateQuestions[0].name
  }
});

The problem is that once there are multiple questions returning, I can't patch the value as an array. I've tried using questions: this.FormBuiler.array([]), but I still can't figure out how to dynamically patch the values. Does anyone have any ideas?

why do want to patch an array of questions in one question ? how this will be shown graphically in HTML ? i didn't get ur problem — Mohamed Ali RACHID
– Mohamed Ali RACHID, Commented Oct 11, 2017 at 20:04
@Med_Ali_Rachid It is an array of questions for 1 assessment. So, the html will show an assessment name, type, status and description, but then the questions will be an array. — chrishaxis
– chrishaxis, Commented Oct 12, 2017 at 12:35
as i see in the object that u posted , questions is an object , not an array , can u please give me an example of the JSON coming from the server when the assessment contains more than one question — Mohamed Ali RACHID
– Mohamed Ali RACHID, Commented Oct 12, 2017 at 12:41
Comments aren't letting me post json is just all runs together but: description: "Six" name: "Template Six" status: Not Started" templateID: 3 templateQuestions: Array(3) 0{questionID: 6, name: "Check your favorite one", goal: "Any Goal", isAddToOverview: false, isDefaultToLastResponse: null, …} 1{questionID: 3, name: "Question 3", goal: "Any Goal", isAddToOverview: false, isDefaultToLastResponse: null, …} 2 {questionID: 1, name: "Question 1", goal: "Any Goal", isAddToOverview: false, isDefaultToLastResponse: null, …} — chrishaxis
– chrishaxis, Commented Oct 12, 2017 at 15:06

AVJT82 · Accepted Answer · 2017-10-14 14:59:56Z

2

What you need to do is to iterate the incoming array, push each object as a FormGroup to an formArray. So the build could have an empty form array:

this.caseAssessmentForm = this.fb.group({
  // more fields here...
  questions: this.fb.array([])
})

...where fb is referring to FormBuilder.

When you get your data, you iterate it and push formgroups to that formarray questions, so:

...
this.caseAssessmentForm.patchValue({
  ID: assessment.templateID,
  name: assessment.name,
  type: assessment.typeName,
  status: "Not Started",
  description: assessment.description,
});
this.patchFormArray(); // call this to populate formarray!
...

patchFormArray() {
  let ctrl = <FormArray>this.caseAssessmentForm.controls.questions;
  this.assesment.templateQuestions.forEach(question => {
    ctrl.push(this.fb.group({
      questionScore: '',
      questionAnswer: '',
      questionGoal: question.goal,
      questionName: question.name
    }))
  })
}

answered Oct 14, 2017 at 14:59

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chrishaxis Over a year ago

Thanks! That got me a step closer I think. I'm getting this error now: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Is a form array not considered an array for the purposes or ngFor ?

AVJT82 Over a year ago

Yes, it is considered as an array. How does your iteration look like? It should be something like *ngFor="let question of caseAssessmentForm.controls.questions.controls"

Collectives™ on Stack Overflow

Patch array of values to Reactive Form

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related