N个相同元素的表格组

问题描述 投票:0回答:1

我有一个服务,返回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。

angular forms
1个回答
0
投票

你应该构建一个 阵列 使用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>

希望能帮到你。

© www.soinside.com 2019 - 2024. All rights reserved.