angular6 – 如何在角度模板驱动的表单模型中使用fieldset表示数

发布时间：2020-12-17 10:25:34 所属栏目：安全来源：网络整理

导读：我有一个具有嵌套对象数组的表单.为了表示多级表单视图模型,我们使用ngModelGroup来映射父子关系.有没有办法使用类似于ngModelGroup的指令来表示数组？以下是模特, export class SurveyViewModel {Survey: Survey;QuestionAnswerSets: QuestionAnswerSet[];

我有一个具有嵌套对象数组的表单.为了表示多级表单视图模型,我们使用ngModelGroup来映射父子关系.有没有办法使用类似于ngModelGroup的指令来表示数组？

以下是模特,

export class SurveyViewModel {
Survey: Survey;
QuestionAnswerSets: QuestionAnswerSet[];
}

export class Survey {
Id: string;
Name: string;   
}


export class QuestionAnswerSet {
Question: Question;
Answers: Answer[];
}

下面是视图,

<form [formGroup]="surveyForm" (ngSubmit)="onFormSubmit(surveyForm)">

      <div formGroupName="Survey">
        <input type="hidden" name="Id" formControlName="Id">
        <label>{{model.Survey.Name}}</label>
      </div>

      <div class='qa-set' formArrayName="QuestionAnswerSets">
        <fieldset *ngFor="let questionAnswerSet of surveyForm.controls.QuestionAnswerSets.controls; index as setId;" [formGroupName]="setId">
          <div formGroupName="Question">

            <input type="hidden" name="Id" formControlName="Id">
            <label>{{setId+1}}. </label>
            <label>{{model.QuestionAnswerSets[setId].Question.Value}}</label>
          </div>

          <div class="row" formArrayName="Answers">
            <div *ngFor="let answer of this.surveyForm.controls.QuestionAnswerSets.controls[setId].controls.Answers.controls; index as answerId;"
              [formGroupName]="answerId">

              <div class="col-12 col-sm-3" formGroupName="Answer">
                <input type="hidden" name="Id" formControlName="Id">
                <label>
                  <input type="radio" name="Value" formControlName="Value" /> {{model.QuestionAnswerSets[setId].Answers[answerId].Value}}
                </label>

              </div>

            </div>
          </div>

        </fieldset>
      </div>

      <div class="row form-group">
        <div class="col-12">
          <button type="button" class="btn btn-primary float-right" type="submit">submit</button>
        </div>
      </div>
    </form>

这就是使用FormArray的方法

零件

import { Component,OnInit } from "@angular/core";
import {
  Validators,FormBuilder,FormGroup,FormControl,FormArray
} from "@angular/forms";
@Component({
  ...
})
export class SurveyComponent implements OnInit {
  public surveyForm: FormGroup;

  constructor(protected formBuilder: FormBuilder) {}

  ngOnInit() {
    this.surveyForm = this.formBuilder.group({
      Survey: new FormGroup({
        Id: new FormControl("",Validators.required),Name: new FormControl("",Validators.required)
      }),QuestionAnswerSets: new FormArray([])
    });
  }

  initSet() {
    return this.formBuilder.group({
      Question: new FormControl("",Answers: new FormArray([])
    });
  }

  addSet() {
    const questionAnswerSets = <FormArray>(
      this.surveyForm.controls.QuestionAnswerSets
    );
    questionAnswerSets.push(this.initSet());
  }

  removeSet(setId: number) {
    let questionAnswerSets = <FormArray>(
      this.surveyForm.controls.QuestionAnswerSets
    );
    questionAnswerSets.removeAt(setId);
  }

  initAnswer() {
    return this.formBuilder.group({
      Answer: new FormControl("",Validators.required)
    });
  }

  addAnswer(setId: number) {
    const questionAnswerSets = <FormArray>(
      this.surveyForm.controls.QuestionAnswerSets
    );
    const answer = <FormArray>(
      questionAnswerSets.controls[setId]["controls"].Answers
    );
    answer.push(this.initAnswer());
  }

  removeAnswer(setId: number,answerId: number) {
    const questionAnswerSets = <FormArray>(
      this.surveyForm.controls.QuestionAnswerSets
    );
    const answer = <FormArray>(
      questionAnswerSets.controls[setId]["controls"].Answers
    );
    answer.removeAt(answerId);
  }
}

teamplate

<form [formGroup]="surveyForm" (ngSubmit)="saveForm(surveyForm.value)">
    <div formArrayName="QuestionAnswerSets">
        <fieldset *ngFor="let questionAnswerSet of surveyForm.controls.QuestionAnswerSets.controls; index as setId;" [formGroupName]="setId">
            <input type="text" formControlName="Question" />
            <div formArrayName="Answers">
                <div class="ui-g-12" *ngFor="let answer of this.surveyForm.controls.QuestionAnswerSets.controls[setId].controls.Answers.controls; index as answerId;"
                    [formGroupName]="answerId">
                    <input type="text" formControlName="Answer" />
                    <button type="button" (click)="removeAnswer(setId,answerId)">Remove Answer</button>
                </div>
            </div>
            <button type="button" (click)="addAnswer(setId)">Add Answer</button>
        </fieldset>
    </div>
    <button type="button" (click)="addSet()">Add Set</button>
</form>

可能我错过了什么,但它会给你一个想法

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!