基本上，我有一個帶有問題的表單和一個用于答案的輸入欄位，如下面的螢屏截圖所示。
如何在下面的預期輸出中使用 formcontrol 相同的結構將問題 id 和答案作為物件陣列。
來自物件的答案是來自每個文本區域欄位的答案，qid 是來自問題的 qid。任何想法將不勝感激。謝謝。
#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>
#我正在回圈的問題串列
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 - this.modelform.value ，這應該是用戶為每個欄位添加答案后的資料結構。物件的答案是每個文本區域欄位的答案，qid 是問題的 qid。
{
"questionAnswer": [{
"qid" :1,
"answer" :"Josh"
},
{
"qid" :10,
"anwer" :"New York"
}],
}
uj5u.com熱心網友回復：
#expected output - this.modelform.value ，這應該是用戶為每個欄位添加答案后的資料結構。物件的答案是每個文本區域欄位的答案，qid 是問題的 qid。
FormBuilder我認為在不涉及物件轉換的情況下，不可能建立這樣的答案模型。
對于你的情況，我會做什么：
- 轉換
questions為FormBuilder物件 - 將表單值轉換為
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);
}
填寫表格后，如果我執行this.modelForm.value，我會在下面
{1: "answer 1", 10: "answer 2"}
// 1 is qid for question 1, 10 is qid for question 2, etc
由此，構造物件questionAnswer
const formValues = this.modelForm.value;
const finalAnswer = {
questionAnswer: Object.keys(formValues).map((qid) => ({
qid: Number(qid),
answer: formValues[qid],
})),
};
console.log(finalAnswer)
我會得到你想要的結果
{
"questionAnswer": [
{ "qid": 1, "answer": "answer 1" },
{ "qid": 10, "answer": "answer 2" }
]
}
在這里查看我的Stackblitz
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/461085.html
標籤：javascript 有角度的 打字稿 目的
下一篇：無法為單個物件運行唯一的迭代