0
105
Vistascontrol de formulario obteniendo valor como una matriz de objetos
Básicamente, tengo un formulario con una pregunta y un campo de entrada para la respuesta, como en la captura de pantalla a continuación.
¿Cómo obtengo la identificación de la pregunta y la respuesta como una matriz de objetos usando formcontrol con la misma estructura en el resultado esperado a continuación?
La respuesta del objeto es la respuesta de cada campo de área de texto y el qid es el qid de las preguntas. Cualquier idea sería muy apreciada. Gracias.
#código HTML
<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>#lista de preguntas que estoy repitiendo
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 || []], }); }#salida esperada: this.modelform.value, esta debería ser la estructura de datos después de que el usuario agregue la respuesta a cada campo. La respuesta del objeto es la respuesta de cada campo de área de texto y el qid es el qid de las preguntas.
{ "questionAnswer": [{ "qid" :1, "answer" :"Josh" }, { "qid" :10, "anwer" :"New York" }], }1 Respuestas
Responde la pregunta0
#salida esperada: this.modelform.value, esta debería ser la estructura de datos después de que el usuario agregue la respuesta a cada campo. La respuesta del objeto es la respuesta de cada campo de área de texto y el qid es el qid de las preguntas.
No creo que sea posible construir el modelo de respuesta como este usando FormBuilder sin involucrar la transformación de objetos.
Para tu caso, lo que yo haría:
- Convertir
questionsen objetoFormBuilder - Convertir valor de formulario a
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); } Después de completar el formulario, si ejecuto this.modelForm.value , obtendría el siguiente
{1: "answer 1", 10: "answer 2"} // 1 is qid for question 1, 10 is qid for question 2, etc A partir de esto, construya el objeto para questionAnswer
const formValues = this.modelForm.value; const finalAnswer = { questionAnswer: Object.keys(formValues).map((qid) => ({ qid: Number(qid), answer: formValues[qid], })), }; console.log(finalAnswer)obtendría el mismo resultado que deseas
{ "questionAnswer": [ { "qid": 1, "answer": "answer 1" }, { "qid": 10, "answer": "answer 2" } ] }Aquí mira mi Stackblitz