0
108
Vistasform control getting value as an array of objects
Basically I have a form with question and an input field for the answer like on the screenshot below.
How do I get the question id and answer as an array of objects using formcontrol the same structure on the expected output below.
The answer from the object is the answer from each text area fields and the qid is the qid from the questions. Any idea would be much appreciated. Thanks.
#html code
<form *ngIf="modelForm" [formGroup]="modelForm">
<div *ngFor="let q of questions;let i = index;" >
<div class="confirm-detail-two">
<div class="p-label">{{q.question}}</div>
</div>
<mat-form-field appearance="fill" class="details-field-container" style="padding-bottom:10px;">
<mat-label>Details</mat-label>
<textarea class="details-textarea" formControlName="questionAnswer" matInput matInput></textarea>
</mat-form-field>
</div>
</form>
#list of questions I am looping
const questions = [
{
"qid": 1,
"question": "What is my name ?"
},
{
"qid": 10,
"question": "Where do I live?"
}
]
#tscode
ngOnInit(): void {
this.modelForm = this._createModelForm();
}
private _createModelForm(): FormGroup {
return this.formBuilder.group({
accountId:this.model.accountId,
questions:[this.model.questions || []],
questionAnswer:[this.model.questionAnswer || []],
});
}
#expected output - the this.modelform.value , this should be the data structure after the user add answer to each field.The answer from the object is the answer from each text area fields and the qid is the qid from the questions.
{
"questionAnswer": [{
"qid" :1,
"answer" :"Josh"
},
{
"qid" :10,
"anwer" :"New York"
}],
}
1 Respuestas
Responde la pregunta0
#expected output - the this.modelform.value , this should be the data structure after the user add answer to each field.The answer from the object is the answer from each text area fields and the qid is the qid from the questions.
I don't think it's possible to build the answer model like this using FormBuilder without involving object transformation.
For your case, what I'd do:
- Convert
questionstoFormBuilderobject - Convert form value to
questionAnswer
questions = [
{
qid: 1,
question: 'What is my name?',
},
{
qid: 10,
question: 'Where do I live?',
},
];
/**
* Created mapping qid to answer
*/
private _createModelForm(): FormGroup {
const idToAnswerMap = this.questions.reduce((acc, question) => {
return {
...acc,
[question.qid]: '', // default answer is blank
};
}, {});
return this.formBuilder.group(idToAnswerMap);
}
After filling the form, if I execute this.modelForm.value, I'd get below
{1: "answer 1", 10: "answer 2"}
// 1 is qid for question 1, 10 is qid for question 2, etc
From this, construct the object for questionAnswer
const formValues = this.modelForm.value;
const finalAnswer = {
questionAnswer: Object.keys(formValues).map((qid) => ({
qid: Number(qid),
answer: formValues[qid],
})),
};
console.log(finalAnswer)
I'd get the same result you wish
{
"questionAnswer": [
{ "qid": 1, "answer": "answer 1" },
{ "qid": 10, "answer": "answer 2" }
]
}
Here check out my Stackblitz