Javascript 角度反应式窗体在嵌套窗体组内添加窗体数组在另一窗体组内添加窗体数组在另一窗体组内_Javascript_Angular

Javascript 角度反应式窗体在嵌套窗体组内添加窗体数组在另一窗体组内添加窗体数组在另一窗体组内

javascript angular

Javascript 角度反应式窗体在嵌套窗体组内添加窗体数组在另一窗体组内添加窗体数组在另一窗体组内,javascript,angular,Javascript,Angular,所以我创建了嵌套的FormGroup（问卷），其中包含一个FormArray（section），其中包含另一个FormGroup（creatSection（）），其中包含另一个FormArray（问题），其中我们有另一个FormGroup（creatQuestion（）），其中我们有另一个FormArray（答案），其中有一个FormGroup（creatAnswer（））所以一切看起来都很好，除非我想添加另一个问题或另一个答案。addSection没有任何效果因此，创建是可以的，但添加中存

所以我创建了嵌套的FormGroup（问卷），其中包含一个FormArray（section），其中包含另一个FormGroup（creatSection（）），其中包含另一个FormArray（问题），其中我们有另一个FormGroup（creatQuestion（）），其中我们有另一个FormArray（答案），其中有一个FormGroup（creatAnswer（））所以一切看起来都很好，除非我想添加另一个问题或另一个答案。addSection没有任何效果因此，创建是可以的，但添加中存在问题。我想的是，当你提出一个问题时，它不知道该放在哪里，但我不知道如何解决它所以我的问卷是这样的

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms'
@Component({
  selector: 'app-questionnaire',
  templateUrl: './questionnaire.component.html',
  styleUrls: ['./questionnaire.component.css']
})
export class QuestionnaireComponent implements OnInit {
questionnaire:FormGroup;
section:FormArray; 
question:FormArray;
answer:FormArray;
  constructor(private fb:FormBuilder) { }

  ngOnInit() {
    this.questionnaire=this.fb.group({ 
      questionnaireName: [''],      
      section : this.fb.array([this.creatSection()])
    })
  }

creatSection():FormGroup{
return this.fb.group({
 sectionName:[''],
 question:this.fb.array([this.creatQuestion()])
}) 
}

addSection(){
 this.section=this.questionnaire.get('section') as FormArray;
  this.section.push(this.creatSection());
}

creatQuestion():FormGroup{
  return this.fb.group({
    questionName:[''],
    type:[''],
    answer:this.fb.array([this.creatAnswer()])
  })
}

addQuestion(){
  this.question=this.creatSection().get('question') as FormArray;
  this.question.push(this.creatQuestion());
}

creatAnswer():FormGroup{
  return this.fb.group({
    id:[''],
    answerName:['']
  })
}

addAnswer(){
  this.answer=this.creatQuestion().get('answer') as FormArray;
  this.answer.push(this.creatAnswer());
}

onSubmit(){
  console.log(this.questionnaire.value); 
}

}

<h1>questionnaire bla bla</h1>
<!-- <app-section></app-section> -->
<form [formGroup]="questionnaire" (ngSubmit)="onSubmit()">
    <input type="text" placeholder="questionnaire..." formControlName="questionnaireName">
    <ng-container formArrayName="section">
    <div [formGroupName]="i" *ngFor="let ques of questionnaire.get('section').controls;let i = index;">

            <input placeholder="section..." formControlName="sectionName" type="text">
            <button (click)="addSection()">add section</button>
            <ng-container formArrayName="question">
            <div [formGroupName]="j" *ngFor="let sec of creatSection().get('question').controls;let j=index;">

                    <input placeholder="question..." formControlName="questionName" type="text">
                    <input placeholder="type..." formControlName="type" type="text">
                    <button (click)="addQuestion()">add question</button>
                    <ng-container formArrayName="answer">
                    <div [formGroupName]="k" *ngFor="let ans of creatQuestion().get('answer').controls;let k=index;">

                            <input placeholder="réponse..." formControlName ="answerName" type="text">
                            <button (click)="addAnswer()">add answer</button>
                        </div>
                    </ng-container>    
                </div>
            </ng-container>
        </div>
    </ng-container>
    <button type="submit">submit</button>
</form>
{{questionnaire.value | json}}

import { Component,OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  questionnaire:FormGroup;
  section:FormArray;
  question:FormArray;
  answer:FormArray;
  constructor(private fb:FormBuilder) { }
  ngOnInit() {
 this.questionnaire=this.fb.group({ 
      questionnaireName: [''],      
      section : this.fb.array([this.creatSection()])
    })
  }
  creatSection():FormGroup{
return this.fb.group({
 sectionName:[''],
 question:this.fb.array([this.creatQuestion()])
}) 
}

addSection(){
 this.section=this.questionnaire.get('section') as FormArray;
  this.section.push(this.creatSection());
}

creatQuestion():FormGroup{
  return this.fb.group({
    questionName:[''],
    type:[''],
    answer:this.fb.array([this.creatAnswer()])
  })
}

addQuestion(groupSection:FormArray){
  const arrayQuestion=groupSection.get('question') as FormArray
  arrayQuestion.push(this.creatQuestion())
}

creatAnswer():FormGroup{
  return this.fb.group({
    id:[''],
    answerName:['']
  })
}

addAnswer(groupQuestion:FormArray){
    const arrayAnswer=groupQuestion.get('answer') as FormArray
  arrayAnswer.push(this.creatAnswer())
}

onSubmit(){
  console.log(this.questionnaire.value); 
}
}

html是这样的

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms'
@Component({
  selector: 'app-questionnaire',
  templateUrl: './questionnaire.component.html',
  styleUrls: ['./questionnaire.component.css']
})
export class QuestionnaireComponent implements OnInit {
questionnaire:FormGroup;
section:FormArray; 
question:FormArray;
answer:FormArray;
  constructor(private fb:FormBuilder) { }

  ngOnInit() {
    this.questionnaire=this.fb.group({ 
      questionnaireName: [''],      
      section : this.fb.array([this.creatSection()])
    })
  }

creatSection():FormGroup{
return this.fb.group({
 sectionName:[''],
 question:this.fb.array([this.creatQuestion()])
}) 
}

addSection(){
 this.section=this.questionnaire.get('section') as FormArray;
  this.section.push(this.creatSection());
}

creatQuestion():FormGroup{
  return this.fb.group({
    questionName:[''],
    type:[''],
    answer:this.fb.array([this.creatAnswer()])
  })
}

addQuestion(){
  this.question=this.creatSection().get('question') as FormArray;
  this.question.push(this.creatQuestion());
}

creatAnswer():FormGroup{
  return this.fb.group({
    id:[''],
    answerName:['']
  })
}

addAnswer(){
  this.answer=this.creatQuestion().get('answer') as FormArray;
  this.answer.push(this.creatAnswer());
}

onSubmit(){
  console.log(this.questionnaire.value); 
}

}

<h1>questionnaire bla bla</h1>
<!-- <app-section></app-section> -->
<form [formGroup]="questionnaire" (ngSubmit)="onSubmit()">
    <input type="text" placeholder="questionnaire..." formControlName="questionnaireName">
    <ng-container formArrayName="section">
    <div [formGroupName]="i" *ngFor="let ques of questionnaire.get('section').controls;let i = index;">

            <input placeholder="section..." formControlName="sectionName" type="text">
            <button (click)="addSection()">add section</button>
            <ng-container formArrayName="question">
            <div [formGroupName]="j" *ngFor="let sec of creatSection().get('question').controls;let j=index;">

                    <input placeholder="question..." formControlName="questionName" type="text">
                    <input placeholder="type..." formControlName="type" type="text">
                    <button (click)="addQuestion()">add question</button>
                    <ng-container formArrayName="answer">
                    <div [formGroupName]="k" *ngFor="let ans of creatQuestion().get('answer').controls;let k=index;">

                            <input placeholder="réponse..." formControlName ="answerName" type="text">
                            <button (click)="addAnswer()">add answer</button>
                        </div>
                    </ng-container>    
                </div>
            </ng-container>
        </div>
    </ng-container>
    <button type="submit">submit</button>
</form>
{{questionnaire.value | json}}

import { Component,OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  questionnaire:FormGroup;
  section:FormArray;
  question:FormArray;
  answer:FormArray;
  constructor(private fb:FormBuilder) { }
  ngOnInit() {
 this.questionnaire=this.fb.group({ 
      questionnaireName: [''],      
      section : this.fb.array([this.creatSection()])
    })
  }
  creatSection():FormGroup{
return this.fb.group({
 sectionName:[''],
 question:this.fb.array([this.creatQuestion()])
}) 
}

addSection(){
 this.section=this.questionnaire.get('section') as FormArray;
  this.section.push(this.creatSection());
}

creatQuestion():FormGroup{
  return this.fb.group({
    questionName:[''],
    type:[''],
    answer:this.fb.array([this.creatAnswer()])
  })
}

addQuestion(groupSection:FormArray){
  const arrayQuestion=groupSection.get('question') as FormArray
  arrayQuestion.push(this.creatQuestion())
}

creatAnswer():FormGroup{
  return this.fb.group({
    id:[''],
    answerName:['']
  })
}

addAnswer(groupQuestion:FormArray){
    const arrayAnswer=groupQuestion.get('answer') as FormArray
  arrayAnswer.push(this.creatAnswer())
}

onSubmit(){
  console.log(this.questionnaire.value); 
}
}

调查问卷bla bla
添加节
添加问题
添加答案
提交
{{questionly.value | json}}

首先不要调用.html中的createSection（）

//WRONG
<div [formGroupName]="j" *ngFor="let sec of creatSection().get('question').controls;let j=index;">
//OK
<div [formGroupName]="j" *ngFor="let sec of ques.get('question').controls;let j=index;">

如果传递数组本身

<button (click)="addAnswer(i,j)">add answer</button>
//or
<button (click)="addAnswer(sec)">add answer</button>

addAnswer(groupQuestion:FormArray)
{
   const arrayAnswer=groupQuestion.get('answer') as FormArray
   arrayAnswer.push(this.creatAnswer())
}

注意：stackblitz是一个简单的检查，在我的代码中可能有eror，请得到它的想法

感谢@Eliseo，结果会是这样的调查表.html

<h1>questionnaire bla bla</h1>
<form [formGroup]="questionnaire" (ngSubmit)="onSubmit()">
    <input type="text" placeholder="questionnaire..." formControlName="questionnaireName">
    <ng-container formArrayName="section">
    <div [formGroupName]="i" *ngFor="let ques of questionnaire.get('section').controls;let i = index;">

            <input placeholder="section..." formControlName="sectionName" type="text">
            <button (click)="addSection()">add section</button>
            <ng-container formArrayName="question">
            <div [formGroupName]="j" *ngFor="let sec of ques.get('question').controls;let j=index;">

                    <input placeholder="question..." formControlName="questionName" type="text">
                    <input placeholder="type..." formControlName="type" type="text">
                    <button (click)="addQuestion(ques)">add question</button>
                    <ng-container formArrayName="answer">
                    <div [formGroupName]="k" *ngFor="let ans of sec.get('answer').controls;let k=index;">

                            <input placeholder="réponse..." formControlName ="answerName" type="text">
                            <button (click)="addAnswer(sec)">add answer</button>
                        </div>
                    </ng-container>    
                </div>
            </ng-container>
        </div>
    </ng-container>
    <button type="submit">submit</button>
</form>
{{questionnaire.value | json}}

什么不起作用？或者具体点！它没有添加新问题或新答案。你能提供stackblitz演示吗？@PrashantPimpale这里的链接很好，你真的救了我@Eliseo谢谢