N个相同元素的Formgroup答案

【问题标题】：Formgroup for N same elementN个相同元素的Formgroup
【发布时间】：2020-05-06 04:57:14
【问题描述】：

我有一个返回 N 个对象“问题”的服务。我必须用 3 个表单控件创建 N 个表单组。问题是，当我创建表单时，它们似乎是相同的。如果我从第一个 formControlName 更改一个值，它也会更改另一个第一个 formControlName

打字稿：

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>

很遗憾，我无法添加堆栈闪电战。

【问题讨论】：

标签： angular forms

【解决方案1】：

您应该从您的问题 json 数据构造一个 formarray 实例。使用 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>

希望这会有所帮助。

【讨论】：