组件的角度形式

Question

我正在尝试创建一个子组件反应表单的数组。每次我在子组件(questionForm(中进行编辑时，它都会在父组件(adminForm(中更新，我已经尝试了两周了。所以如果你能帮忙的话，我很感激我留下了一些我一直在研究的相关代码

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

当您使用子级来控制FormGroup时，有两种方法：

1. 在父级中创建formGroup并使用@Input传递给子级
2. 在子级中创建formGroup并使用@Output传递给父级

对我来说，使用第一个通道更舒适

如果你在你的父母

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());
}

你的孩子只是有

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

hml类似于另一种形式Group

<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>