【发布时间】：2020-06-18 12:21:46
【问题描述】：
首先很抱歉创建了一个长帖子，但我别无选择 这是因为我需要解释面临的问题。
我有一个表单，其中控件是 JSON 数组。我已经创建了一个反应形式。下面是我的 JSON 和我的 TS 代码：
JSON（从后端请求获取）
{
"questionList": [
{
"questionCategory": {
"questionCategoryName": "JAVA",
"id": 40,
"isActive": true,
"timestamp": "2020-06-12 14:06:47.325"
},
"difficultyLevel": 0,
"options": [
{
"answer": false,
"id": 2,
"optionText": "method",
"timestamp": "2020-06-18 17:17:11.75"
},
{
"answer": false,
"id": 3,
"optionText": "name",
"timestamp": "2020-06-18 17:17:11.753"
},
{
"answer": false,
"id": 4,
"optionText": "class",
"timestamp": "2020-06-18 17:17:11.758"
},
{
"answer": true,
"id": 1,
"optionText": "variable",
"timestamp": "2020-06-18 17:17:11.663"
}
],
"section": {
"marksPerQuestion": 3,
"id": 8,
"isActive": true
},
"id": 1,
"isActive": true,
"questionText": "What is a variable ?",
"timestamp": "2020-06-18 17:17:10.946"
},
{
"questionCategory": {
"questionCategoryName": "APTITUDE",
"id": 41,
"isActive": true
},
"difficultyLevel": 0,
"options": [
{
"answer": true,
"id": 6,
"optionText": "xyz",
"timestamp": "2020-06-17 21:50:48.975"
},
{
"answer": true,
"id": 5,
"optionText": "abc",
"timestamp": "2020-06-17 21:50:48.907"
}
],
"section": {
"marksPerQuestion": 2,
"id": 7,
"isActive": true,
"timestamp": "2020-06-12 14:08:14.181"
},
"id": 2,
"isActive": true,
"questionText": "What is def",
"timestamp": "2020-06-17 21:50:48.6"
}
],
"empty": false
}
此 JSON 的 TS 代码
updateQuestionForm = this.fb.group({
id: [], isActive: [], difficultyLevel: [0], questionText: [''],
questionCategory: this.fb.group({
id: [],
questionCategoryName: ['']
}),
section: this.fb.group({
id: [],
marksPerQuestion: ['']
}),
options: new FormArray([])
});
optionForm = this.fb.group({
id: [], optionText: [''], answer: []
});
onEdit(e) {
const formArray: FormArray = this.updateQuestionForm.get('options') as FormArray;
this.updateQuestionForm.controls['id'].setValue(e.id);
this.updateQuestionForm.controls['isActive'].setValue(e.isActive);
this.updateQuestionForm.controls['questionText'].setValue(e.questionText);
this.updateQuestionForm.controls['questionCategory'].setValue({
id: e.questionCategory.id,
questionCategoryName: e.questionCategory.questionCategoryName
});
this.updateQuestionForm.controls['section'].setValue({
id: e.section.id,
marksPerQuestion: e.section.marksPerQuestion
});
for(let i of e.options) {
this.optionForm.controls['id'].setValue(i.id);
this.optionForm.controls['optionText'].setValue(i.optionText);
this.optionForm.controls['answer'].setValue(i.answer);
formArray.push(new FormControl(this.optionForm.value));
}
console.log(this.updateQuestionForm.value);
}
get Status() {
return this.updateQuestionForm.get('isActive');
}
get Options(): FormArray {
return this.updateQuestionForm.get('options') as FormArray;
}
让我解释一下 TS 的规定：
首先，我正在创建一个updateQuestionForm 的表单，它是 JSON 的主要表单。
optionForm 的第二种形式用于updateQuestionForm 的options FormArray。
我创建了第二种形式，因为我需要数组中的某些控件。所以这件事一直萦绕在我的脑海里。
onEdit() 方法由单击按钮触发，该按钮从 Mat-Table 获取 JSON。
HTML 表单
<form [formGroup]="updateQuestionForm" (submit)="onUpdateQuestionForm()">
<div class="row">
<div class="col-md-4">
<mat-form-field>
<mat-label>Enter Question</mat-label>
<input matInput formControlName="questionText">
</mat-form-field>
</div>
<div class="col-md-3">
<mat-form-field formGroupName="questionCategory">
<mat-label>Question Category</mat-label>
<mat-select formControlName="id">
<ng-container *ngFor="let q of QuestionCategory;">
<mat-option [value]="q.id">{{ q.questionCategoryName }}</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-3">
<mat-form-field formGroupName="section">
<mat-label>Marks</mat-label>
<mat-select formControlName="id">
<ng-container *ngFor="let m of Marks;">
<mat-option [value]="m.id">{{ m.marksPerQuestion }}</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-2">
<mat-label>Status</mat-label><br>
<mat-slide-toggle color="primary" formControlName="isActive">{{ Status ? 'Active' : 'Inactive' }}</mat-slide-toggle>
</div>
</div>
<h3>Options & Answers</h3>
<div formArrayName="options">
<div class="row" *ngFor="let o of Options.value; index as i" [formGroupName]="i">
<div class="col-md-6">
<mat-form-field>
<mat-label>Option</mat-label>
<input matInput formControlName="optionText">
</mat-form-field>
</div>
<div class="col-md-3">
<mat-label>Answer</mat-label><br>
<mat-slide-toggle color="primary" formControlName="answer">
{{ answer ? 'True' : 'False' }}
</mat-slide-toggle>
</div>
</div>
</div>
<button mat-flat-button type="submit" style="background-color: #28a745; color: white;">Update</button>
</form>
这是 JSON 的形式。我成功地获取和存储控件questionCategory、section、isActive、questionText 的值。 options 控件出现问题。我有 4 个选项（每个从数据库中获取 4 个optionText、4 个answer；参考上面的示例 JSON）。
但我无法显示控件。看起来formArrayName="options" 内部的ngFor 不起作用。在h2 之后，什么都没有发生。
请帮助我。仅供参考，我关注这个 link 的 formArrayName 循环部分。
【问题讨论】：
-
如果我错了，请纠正我，使用
updateQuestionForm，您正在尝试创建上面提到的 JSON 结构？或者您是否尝试从用户那里获取给定问题列表的答案？ -
@Harish 是的。实际上这是一个更新表单，
onEdit()方法正在获取值并在updateQuestionForm控件中对其进行初始化。这些值将在带有控件的视图部分中检索。然后，如果值发生更改，Update按钮会将值发送到后端，稍后我将集成该后端以进行计时，我需要渲染选项以查看。 -
所以基本上，您是在使用这个表格来更新问题和选项，对吧？如果是，则您的表单结构很复杂，可以简化。首先你不需要
optionForm。 -
是的，我将其用作更新表单。那么请建议我简化的方法
-
不要介意我问的这些多个问题。您是使用此表格一次更新单个问题还是多个问题？我正在尝试在 stackbliz 上编写代码，以便您轻松理解修复。
标签： javascript json angular typescript angular9