0

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?

Improve this question
4
  • 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 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. 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 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, …} Commented Oct 12, 2017 at 15:06

1 Answer 1

Reset to default
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
    }))
  })
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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 ?
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"

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.