Angular 组件的FormAray

Question

我正在尝试做一个子组件反应形式的数组。每次我在子项（questionForm）中编辑时，它都会在父项（adminForm）中更新，我已经尝试这样做了 2 周。如果您能提供帮助，我将不胜感激我留下了一些我一直在做的相关代码

parent.ts

 this.adminForm=this.fb.group({
      //SurveyName:this.nameForm.getData(),
      Questions: this.fb.array([
      ])
    });

get questions() {
    return this.adminForm.controls["Questions"] as FormArray;
  }
addQuestion() {
    //this.questions.push();
  }

parent.html

<div *ngFor="let alias of questions.controls; let i=index">
            <app-question></app-question>
</div>
 <a (click)="addQuestion()">Add question</a>

child.ts

this.questionForm = this.fb.group({
      question: [''],
      type: ['Checkboxes'],
      required: [false],
      options: this.fb.array([
        this.fb.control('')
      ])
    });

Answer 1

当你使用child来控制一个FormGroup时，有两种方法：

在 parent 中创建 formGroup 并使用 @Input
在 child 中创建 formGroup 并使用 @Output

对我来说使用第一种方法更舒服

如果你有 parent

getGroup(){
  return this.fb.group({
      question: [''],
      type: ['Checkboxes'],
      required: [false],
      options: this.fb.array([
        this.fb.control('')
      ])
    });
}
//when add a question, always in parent
addQuestion() {
  this.questions.push(this.getGroup());
}

你的child只有

formGroup:FormGroup;
@Input('form') set form(value){
    this.formGroup=value as FormGroup
}

hml 像另一个 formGroup

   <form [formGroup]="formGroup">
     <input formControlName="question">
     ....
   </form>

而你在 parent 中使用：

<div *ngFor="let alias of questions.controls; let i=index">
     <app-question [form]=questions.at(i)></app-question>
</div>

Angular 组件的FormAray

Angular FormAray of compnent

angular2-formbuilder

angular

angular-reactive-forms

formarray

angular-formbuilder