我有一个服务,返回N个对象 "问题"。我必须用3个formcontrol创建N个表单组。问题是,当我创建我的表单时,它们似乎是相同的。如果我改变了第一个formControlName的值,那么其他第一个formControlName也会改变。
Typescript:
createFormQuestions(questions ?: Question[]) {
for (let i = 0; i < questions.length; i++) {
this.formQuestion = this.formBuilder.group({
parameter1: [null, Validators.required],
parameter2: [null, Validators.required],
parameter3: [null, Validators.required],
});
this.questionsFormArray.push(this.formQuestion);
}
}
HTML:
<accordion-tab *ngFor="let question of questionsItems; let i = index;" class="mb-2" id="lazyAccordionTab-{{i}}">
<form [formGroup]="formQuestion" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div *ngIf="domanda" class="row w-100 mt-2">
<!-- input parameter 1 -->
<div *ngIf="question.parameter1" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 form-group">
<input formControlName="parameter1" class="questionario-input-border form-control" type="text">
</div>
<!-- input parameter 2 -->
<div *ngIf="question.parameter2" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 form-group">
<input formControlName="parameter2" class="questionario-input-border form-control" type="text">
</div>
<!-- input parameter 3 -->
<div *ngIf="question.parameter3" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 form-group">
<input formControlName="parameter3" class="questionario-input-border form-control" type="text">
</div>
</div>
</form>
</accordion-tab>
不幸的是,我不能添加一个stackblitz。
你应该构建一个 阵列 使用FormArray您可以从动态数据源中声明性地添加新的表单字段或表单字段集。
请看下面的修改后的例子(注意:未经测试,但最好能正常工作
constructor(private fb: FormBuilder) {}
form: FormGroup = this.fb.group({
questionArr: this.fb.array([])
});
ngOnInit() {
this.createFormQuestions(questions?: Question[]);
}
createFormQuestions(questions: any) {
const questionFGs = questions.map(q=> this.fb.group(q));
const questionFormArray = this.fb.array(questionFGs);
this.form.setControl('questionArr', questionFormArray);
this.setQuestionsValue();
}
get getQuestions(): FormArray {
return this.form.get('questionArr') as FormArray;
}
setQuestionsValue() {
const qArr = this.getQuestions;
qArr.controls.map(t => {
const newValue = t.questionText1 or whatever json property;
t.setValue({
parameter1: newValue
});
});
}
在你的html中循环formarray,并从那里构建动态formgroup实例。
<form [formGroup]="form">
<div formArrayName="questionArr">
<div *ngFor="let question of getQuestions.controls; let i=index" [formGroupName]="i">
<mat-form-field appearance="legacy">
<mat-label>Legacy form field</mat-label>
<input matInput formControlName="parameter1">
</mat-form-field>
...............-> like that
</div>
</div>
</form>
希望能帮到你。