步驟向導形式

Question

我正在使用角度動態表格進行角度應用，在這里我需要將表格分為兩部分。

在第一頁中我輸入了firstname and lastname字段中，然后單擊下一步按鈕，需要加載具有email and dropdown的子項。

HTML：

    <form (ngSubmit)="onSubmit()" [formGroup]="form">

        <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>

  <button (click)="goBack()"> Previous </button> &nbsp;
  <button (click)="addControls('myArray')"> Next </button> 

        <div class="form-row">
            <button type="submit" [disabled]="!form.valid">Save</button>
    </div>
  </form>

Ts：

  @Input() questions: QuestionBase<any>[] = [];
  form: FormGroup;
  payLoad = '';

  page: number = 0

  constructor(private qcs: QuestionControlService) { }

  ngOnInit() {
    this.form = this.qcs.toFormGroup(this.questions);
  }

  onSubmit() {
    this.payLoad = JSON.stringify(this.form.value);
  }
  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);
  }

  goBack() {
    //Function to move to previous step
  }

工作演示 ：

https://stackblitz.com/edit/angular-x4a5b6-p4agaq

在這個帶有代碼的演示中，您可以在每次單擊添加按鈕時看到，子對象（數組）被附加到同一頁面的以下內容中。

我也有removeControl函數，

  removeControls(control: string){
    let array=this.form.get(control) as FormArray;
    array.removeAt(array.length-1);
  }

為了清楚起見，我現在不打算使用它，也不會在任何地方刪除任何東西。.只需單擊下一步，子項就可以通過addControl函數將子項添加到下一頁，並在上一個子級上將其返回到上一步。

為了附加到演示中提供的同一頁面，它應該移至下一頁，並在單擊上一個頁面時再次單擊，它在每次下一次單擊時都應恢復為原始狀態，應提供新的email and dropdown並在上一個頁面上返回到上一步..

前后移動時，它應該像具有滑動效果的滑塊一樣移動。

一切都需要以純角度和javascript / typescript為基礎，並且沒有jquery ..正如您可以在我的演示中看到的，我沒有包含任何庫或jquery。

請幫助我實現結果。卡住了很長時間..

Answer 1

在要刪除的goBack方法中傳遞數組

   <button (click)="goBack('myArray')"> Previous </button> &nbsp;    

將此方法放在組件ts文件中

  goBack(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).removeAt(children.length-1)

  }

Answer 2

如果要創建步進表單，則可以投影表單並使用formcontrol連接上級表單組。

ParentComponent.ts

---

下一個

name = 'Angular';
  eSave = true;
  form = new FormGroup({});
  step2 = new FormGroup({});
  nextForm = false;

  ngOnInit() {
    this.form.statusChanges.subscribe(s => this.eSave = true);
  }   
  moveToNext() {
    if (this.form.valid) {
      this.nextForm = true;
    }
  }   
  moveToPrevious() {
    this.nextForm = false;
  }
  save() {
    console.log(this.form);
    console.log(this.step2);
  }
  enableSave($event) {
    if ($event == 'VALID' && this.form.valid) {

      this.eSave = false;
    }
  }

ParentComponent.ts

 name = 'Angular'; eSave = true; form = new FormGroup({}); step2 = new FormGroup({}); nextForm = false; ngOnInit() { this.form.statusChanges.subscribe(s => this.eSave = true); } moveToNext() { if (this.form.valid) { this.nextForm = true; } } moveToPrevious() { this.nextForm = false; } save() { console.log(this.form); console.log(this.step2); } enableSave($event) { if ($event == 'VALID' && this.form.valid) { this.eSave = false; } } 

例如： https ： //stackblitz.com/edit/angular-nynvvr

Answer 3

嘗試達到您的要求：UI部分除外。 希望您可以根據需要處理UI。

TS：

    import { Component, Input, OnInit } from '@angular/core';
    import { FormGroup, FormArray } from '@angular/forms';

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

    @Component({
      selector: 'app-dynamic-form',
      templateUrl: './dynamic-form.component.html',
      providers: [QuestionControlService]
    })
    export class DynamicFormComponent implements OnInit {

      @Input() questions: QuestionBase<any>[] = [];
      form: FormGroup;
      payLoad = '';

      page: number = 0;

      constructor(private qcs: QuestionControlService) { }

      ngOnInit() {
        this.form = this.qcs.toFormGroup(this.questions);
      }

      onSubmit() {
        this.payLoad = JSON.stringify(this.form.value);
      }
      addControls(control: string, index: any) {
        let array = this.form.get('myArray') as FormArray;
        if (array.length > this.page) {
          this.page = this.page + 1;
        } else {
          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))
          this.page = this.page + 1;
        }
      }
      removeControls(control: string) {
        let array = this.form.get(control) as FormArray;
        array.removeAt(array.length - 1);
      }

      goBack() {
        if (this.page > 0) {
          this.page = this.page - 1;
        }
        //let array = this.form.get('myArray') as FormArray;
        //array.removeAt(array.length - 1);
        //Function to move to previous step
      }

    }

HTML : 

<div>
    <form (ngSubmit)="onSubmit()" [formGroup]="form">

        <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">
            <ng-template [ngIf]="i + 1 == page"> 
              <div *ngFor="let item of question.children">
                <app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
              </div>
            </ng-template>
                    </div>
                </div>
            </ng-container>
            <ng-container *ngIf="!question.children">
                <app-question [question]="question" [form]="form"></app-question>

            </ng-container>
        </div>

  <button (click)="goBack()"> Previous </button> &nbsp;
  <button (click)="addControls('myArray',i)"> Next </button> 

        <div class="form-row">
            <button type="submit" [disabled]="!form.valid">Save</button>
    </div>
  </form> <br>

  <pre>
{{form?.value|json}}
</pre>
</div>

這將幫助您一次顯示一頁。 如果不存在下一個表單，它將創建一個新表單。 然后單擊上一個，它將導航到舊表格。

Answer 4

因此，您要從form group array刪除最后添加的控件email and dropdown控件。

我已將代碼添加到goBack()函數中，以刪除子表單組控件。

零件：

  goBack() {
    //Function to move to previous step
    if(this.form.controls['myArray']){      
      const arr = <FormArray>this.form.controls.myArray;
      arr.removeAt(arr.length - 1);
    }
  }

工作演示 ： https : //angular-x4a5b6-cc4kyr.stackblitz.io