Angular 如何在ng中创建动态表单，以便将数据发布到数据库？

我正在制作一个web应用程序，它从数据库中读取问题并打印出来，然后让用户输入答案

在html中使用ng for遍历数据库并打印问题。尝试使用formgroups，但出现错误，我不知道如何修复

HTML:
<form id="myForm" [formGroup]="thisIsMyForm">
    <div [formArrayName] = "'formArrayName'">
        <ul *ngFor="let question of questions[0]; let i = index">
            <div formGroupName="{{i+1}}">
                <div *ngIf="question.Capability === Capability">
                    <h3 class="SubCat">{{question.SubCategory}} {{question.Skill}}</h3>
                        <div class="EandS">
                            <h4 class="skill">Skill</h4>
                            <h4 class="energy">Energy</h4>
                        </div>


                        <div class = "buttons">
                            <div class="skillButtons">
                                <mat-radio-group aria-label="Select your Skill Level" >
                                        <mat-radio-button  value="0" class="rbuttonSkill">0</mat-radio-button>
                                        <mat-radio-button  value="1" class="rbuttonSkill">1</mat-radio-button>
                                        <mat-radio-button  value="2" class="rbuttonSkill">2</mat-radio-button>
                                        <mat-radio-button  value="3" class="rbuttonSkill" >3</mat-radio-button>
                                        <mat-radio-button  value="4" class="rbuttonSkill" >4</mat-radio-button>
                                </mat-radio-group>
                            </div>

                        <div class="energyButtons">
                            <mat-radio-group aria-label="Select your Energy Level" >
                                    <mat-radio-button  value="1" class="rbuttonEnergy" >1</mat-radio-button>
                                    <mat-radio-button  value="2" class="rbuttonEnergy" >2</mat-radio-button>
                                    <mat-radio-button  value="3" class="rbuttonEnergy" >3</mat-radio-button>
                            </mat-radio-group>
                            <button *ngIf="!fomrControlState(i)" (click)="toggleEdit(i)">Save</button>
                        </div>
                    </div>
                    <button [disabled]="thisIsMyForm.get('formArrayName').enabled" (click)="onSubmit()">Submit Form</button>
                </div>
            </div>
        </ul>
    </div> 
</form>


TS: 


export class QuestionListComponent implements OnInit, OnDestroy{
    questions: Question[] = [];
    private questionsSub: Subscription;
    thisIsMyForm: FormGroup

    @Input() Capability: string;
    constructor(public questionsService: QuestionService, private formBuilder: FormBuilder){
        this.thisIsMyForm = new FormGroup ({
            formArrayName: this.formBuilder.array([])
        })
        this.buildForm();
    }

    buildForm(){
        const controlArray = this.thisIsMyForm.get('formArrayName') as FormArray;

        Object.keys(this.questions).forEach((i) => {
            controlArray.push(
                this.formBuilder.group({
                    Capability: new FormControl({value: this.questions[i].Capability, disabled:true }),
                    SubCategory: new FormControl({value: this.questions[i].SubCategory, disabled: true}),
                    Skill: new FormControl({value: this.questions[i].Skill, disabled:true}),
                    SkillID: new FormControl({value: this.questions[i].SkillID, disabled:true})
                })
            )
        })
        console.log(controlArray)
    }

    toggleEdit(i){
        const controlArray = this.thisIsMyForm.get('formArrayName') as FormArray;
        if(controlArray.controls[i].status === 'DISABLED'){
            controlArray.controls[i].enable()
        }else{
            controlArray.controls[i].disable()
        }
    }

    fomrControlState(i){
        const controlArray = this.thisIsMyForm.get('formArrayNAme') as FormArray;
        return controlArray.controls[i].disable
    }


    ngOnInit(){
        this.questionsService.getQuestions().subscribe(
            data => {
            this.questions = [];
            Object.keys(data).map((key)=>{ this.questions.push(data[key]) });
            console.log(this.questions);
            });

    }
    onSubmit(){
        console.log(this.thisIsMyForm.value)
    }
}

HTML：

{{question.SubCategory}{{question.Skill}}
技巧
能量
0
1.
2.
3.
4.
1.
2.
3.
拯救
提交表格

TS:
导出类QuestionListComponent实现OnInit、OnDestroy{
问题：问题[]=[]；
私人问题：订阅；
此列表形式：FormGroup
@Input（）功能：字符串；
构造函数（公共问题服务：问题服务，私有表单生成器：表单生成器）{
this.thisIsMyForm=新表单组({
formArrayName:this.formBuilder.array（[]）
})
这个.buildForm（）；
}
buildForm（）{
const controlArray=this.thisIsMyForm.get（'formArrayName'）作为FormArray；
Object.key（this.questions）.forEach（（i）=>{
controlArray.push(
此为.formBuilder.group({
能力：新FormControl（{value:this.questions[i].Capability，disabled:true}），
子类别：new FormControl（{value:this.questions[i]。子类别，禁用：true}），
Skill:newformcontrol（{value:this.questions[i].Skill，disabled:true}），
SkillID:newformcontrol（{value:this.questions[i].SkillID，disabled:true}）
})
)
})
console.log（controlArray）
}
切换编辑（i）{
const controlArray=this.thisIsMyForm.get（'formArrayName'）作为FormArray；
if（controlArray.controls[i].status==‘DISABLED’）{
controlArray.controls[i].enable（）
}否则{
controlArray.controls[i].disable（）
}
}
fomrControlState（一）{
const controlArray=this.thisIsMyForm.get（'formArrayNAme'）作为FormArray；
返回controlArray.controls[i]。禁用
}
恩戈尼尼特（）{
this.questionsService.getQuestions（）.subscribe(
数据=>{
这个。问题=[]；
Object.keys（data）.map（（key）=>{this.questions.push（data[key]）}）；
console.log（this.questions）；
});
}
onSubmit（）{
console.log（this.thisIsMyForm.value）
}
}

---

需要获得一个JSON，其中包含所有问题的分数和他们的技能。一旦从API中检索到数据，您应该创建一个

FormArray

。

功能

数组中的每个项目都可以映射到

表单组

。然后可以将其绑定到

表单

HTMLElement

您还需要一种方法来启用或禁用特定功能

FormGroup

请尝试一下：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  capabilityForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private http: HttpClient,
  ) {}

  ngOnInit() {
    this.http.get('/assets/data.json')
      .subscribe((data: any[]) => {
        this.capabilityForm = this.fb.group({
          capabilities: this.fb.array(data.map(datum => this.generateDatumFormGroup(datum)))
        });
      });
  }

  enableSection(index, disabled) {
    const capabilityFormGroup = (<FormArray>this.capabilityForm.get('capabilities')).at(index);
    disabled ? capabilityFormGroup.enable() : capabilityFormGroup.disable();
  }

  private generateDatumFormGroup(datum) {
    return this.fb.group({
      capability: this.fb.control({ value: datum.Capability, disabled: true }),
      subCategory: this.fb.control({ value: datum.SubCategory, disabled: true }),
      skill: this.fb.control({ value: datum.Skill, disabled: true }),
      skillId: this.fb.control({ value: datum.SkillID, disabled: true })
    });
  }

}

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormGroup，FormBuilder，FormArray}；
从'@angular/common/http'导入{HttpClient}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
能力形式：FormGroup；
建造师(
私人fb:FormBuilder，
私有http:HttpClient，
) {}
恩戈尼尼特（）{
this.http.get（'/assets/data.json'））
.订阅（（数据：any[]）=>{
this.capabilityForm=this.fb.group({
功能：this.fb.array（data.map（datum=>this.generateDatumFormGroup（datum）））
});
});
}
启用部分（索引，禁用）{
const capabilityFormGroup=（this.capabilityForm.get（'capabilities'））.at（索引）；
禁用？CapabilityForMgrGroup.enable（）：CapabilityForMgrGroup.disable（）；
}
私有生成的TumFormGroup（数据）{
返回此.fb.group({
能力：this.fb.control（{value:datum.capability，disabled:true}），
子类别：this.fb.control（{value:datum.subCategory，disabled:true}），
skill:this.fb.control（{value:datum.skill，disabled:true}），
skillId:this.fb.control（{value:datum.skillId，disabled:true}）
});
}
}

在模板中：

<form 
  *ngIf="capabilityForm"
  [formGroup]="capabilityForm">
  <div formArrayName="capabilities">
    <div *ngFor="let capability of capabilityForm.controls['capabilities'].controls; let i = index">
      <div [formGroupName]="i">
        <input type="text" formControlName="capability">
        <input type="text" formControlName="subCategory">
        <input type="text" formControlName="skill">
        <input type="text" formControlName="skillId">
        <button (click)="enableSection(i, capability.disabled)">{{ capability.disabled ? 'Edit': 'Save' }}</button>
      </div>
    </div>
  </div>
</form>

{{capability.disabled？'Edit'：'Save'}

---

PS:我在模板中没有使用角度材质。请你自己做

---

这是给你的裁判的一封信

---

嗨，卢克。欢迎来到StackOverflow。请分享一些示例数据，以便与“用户数据”：[{“能力”：“同事”，“子类别”：“核心技能”，“技能”：“沟通”，“技能”：1}，{“能力”：“同事”，“子类别”：“核心技能”，“技能”：“组织技能”，“SkillID”：2}，@LukeHarland，您的样本数据没有技能等级和能量等级。因此在stackblitz中没有提及这一点。另外，请随时提供stackblitz，复制您的问题并与我们分享