角動態表單嵌套字段

Question

借助於https://angular.io/guide/dynamic-form ，我正在制作一個動態表單，在該表單中我需要首先顯示兩個字段。

  new TextboxQuestion({
    key: 'firstName',
    label: 'First name',
    value: '',
    required: true,
    order: 1
  }),

  new TextboxQuestion({
    key: 'lastName',
    label: 'Last name',
    value: '',
    required: true,
    order: 2
  }),

這兩個字段需要首先加載。

在這之后，我將有兩個按鈕作為add and remove 。

  <button (click)="addNew()"> Add </button> &nbsp;&nbsp;&nbsp;
  <button (click)="removeNew()"> Remove </button> <br><br>

通過單擊添加，我需要顯示接下來的兩個字段（以下字段），

  new TextboxQuestion({
    key: 'emailAddress',
    label: 'Email',
    type: 'email',
    order: 3
  }),

  new DropdownQuestion({
    key: 'brave',
    label: 'Bravery Rating',
    options: [
      {key: 'solid',  value: 'Solid'},
      {key: 'great',  value: 'Great'},
      {key: 'good',   value: 'Good'},
      {key: 'unproven', value: 'Unproven'}
    ],
    order: 4
  })

訂單1和2處於初始狀態，單擊添加后，需要顯示接下來的兩個訂單3和4。

請幫助我達到單擊添加按鈕添加子字段的結果。

一次顯示所有內容的工作stackblitz， https： //stackblitz.com/edit/angular-x4a5b6

Answer 1

使用formArray實現動態表單。

好吧，事情更復雜了。 我做了一個stackblik，請看演示

我將嘗試解釋如何擴展https://angular.io/guide/dynamic-form以允許表單數組。

我們需要做的第一件事是創建一種新型的問題，一個questionArray

import { QuestionBase } from './question-base';

export class ArrayQuestion extends QuestionBase<string> {
  controlType = 'array';
  type: any;

  constructor(options: {} = {}) {
    super(options);
  }
}

我們必須更改問題庫以添加新的屬性“兒童”

export class QuestionBase<T> {
  value: T;
  ...
  children:any[];

  constructor(options: {
      value?: T,
      ...
      children?:any
    } = {}) {
    this.value = options.value;
    ...
    this.children=options.children || null;
  }
}

添加更改問題控制服務以允許管理formArrays

toFormGroup(questions: QuestionBase<any>[]) {
    let group: any = {};

    questions.forEach(question => {
      //If the control type is "array" we create a FormArray
      if (question.controlType=="array") {
         group[question.key]=new FormArray([]);
      }
      else {
        group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
          : new FormControl(question.value || '');
      }
    });
    return new FormGroup(group);
  }

好吧，我們將dynamic-form.component轉換為一個FormArray

<div *ngFor="let question of questions" class="form-row">
    <ng-container *ngIf="question.children">
        <div [formArrayName]="question.key">
            <div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
                <div *ngFor="let item of question.children">
                    <app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
                </div>
            </div>
        </div>
    </ng-container>
    <ng-container *ngIf="!question.children">
        <app-question [question]="question" [form]="form"></app-question>

    </ng-container>
</div>

而且就這樣。 那么，如何增加和減少formArrays？ 我們有兩個按鈕

  <button (click)="addControls('myArray')"> Add </button>
  <button (click)="removeControls('myArray')"> Remove </button> <br><br>

還有兩個函數addControls和removeControls

  addControls(control: string) {
    let question: any = this.questions.find(q => q.key == control);
    let children = question ? question.children : null;
    if (children)
      (this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
  }
  removeControls(control: string){
    let array=this.form.get(control) as FormArray;
    array.removeAt(array.length-1);
  }

更新我忘記添加和問題示例：

let questions: QuestionBase<any>[] = [

      new TextboxQuestion({
        key: 'firstName',
        label: 'First name',
        value: '',
        required: true,
        order: 1
      }),

      new TextboxQuestion({
        key: 'lastName',
        label: 'Last name',
        value: '',
        required: true,
        order: 2
      }),
      new ArrayQuestion({
        key: 'myArray',
        value: '',
        order: 3,
        children: [
          new TextboxQuestion({
            key: 'emailAddress',
            label: 'Email',
            type: 'email',
            order: 3
          }),
          new DropdownQuestion({
            key: 'brave',
            label: 'Bravery Rating',
            options: [
              { key: 'solid', value: 'Solid' },
              { key: 'great', value: 'Great' },
              { key: 'good', value: 'Good' },
              { key: 'unproven', value: 'Unproven' }
            ],
            order: 4
          })
        ]
      })
    ];

Answer 2

您唯一需要做的就是使用slice和變量“ page”“分頁”您的問題

那是：

  //add a variable "page" in your dinamic-form.component.ts
  page:number=0;

和

  //in your dinamic-form.component.html, change the *ngFor like
  <form (ngSubmit)="onSubmit()" [formGroup]="form">
    <div *ngFor="let question of questions.slice(page*2,(page+1)*2)" class="form-row">
      <app-question [question]="question" [form]="form"></app-question>
    </div>
   ....
  </form>

然后，您的按鈕添加可以像

  <button (click)="page=page+1"> Add </button>