Javascript 步骤向导窗体

我正在使用角动态表单进行角应用，我需要将表单分为两部分

在其中，我在第一页输入了字段

firstname和lastname

，单击下一步按钮，需要加载具有

电子邮件和下拉列表的孩子

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>

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

明确地说，我现在不打算使用它，也不打算在任何地方移除任何东西。。唯一的问题是单击next（下一步），通过
addControl
功能将子项添加到下一页，然后单击previous（上一步）返回上一步

为了附加到演示中给出的同一页，它应该移动到下一页，再次单击上一页，它应该回到原始状态。每单击一次，它应该给出一封新的
电子邮件和下拉列表
，上一步返回上一步

它应该像滑块一样在前后移动时产生滑动效果

所有内容都需要纯角度和基于javascript/typescript，并且没有jquery。。正如您可以在我的演示中看到的，我没有包括任何库或jquery

请帮助我取得这个结果。。长时间呆滞..
已尝试达到您的要求：UI部分除外。我希望你能按照你的要求处理你的用户界面

TS:

从'@angular/core'导入{Component，Input，OnInit}；
从'@angular/forms'导入{FormGroup，FormArray}；
从“/question base”导入{QuestionBase}；
从“./question-control.service”导入{QuestionControlService}；
@组成部分({
选择器：“应用程序动态表单”，
templateUrl:'./dynamic form.component.html'，
提供者：[问题控制服务]
})
导出类DynamicFormComponent在NIT上实现{
@输入（）问题：问题库[]=[]；
表格：表格组；
有效载荷=''；
页码：编号=0；
构造函数（专用qcs:QuestionControlService）{}
恩戈尼尼特（）{
this.form=this.qcs.toFormGroup（this.questions）；
}
onSubmit（）{
this.payLoad=JSON.stringify（this.form.value）；
}
addControls（控件：字符串，索引：任意）{
让array=this.form.get（'myArray'）作为FormArray；
如果（array.length>this.page）{
this.page=this.page+1；
}否则{
让问题：any=this.questions.find（q=>q.key==control）；
让子对象=问题？问题。子对象：null；
if（儿童）
（this.form.get（control）作为FormArray）。push（this.qcs.toFormGroup（children））
this.page=this.page+1；
}
}
RemoveControl（控件：字符串）{
让array=this.form.get（control）作为FormArray；
array.removeAt（array.length-1）；
}
戈巴克（）{
如果（this.page>0）{
this.page=this.page-1；
}
//让array=this.form.get（'myArray'）作为FormArray；
//array.removeAt（array.length-1）；
//函数移到上一步
}
}
HTML:
以前的
下一个
拯救


{{form？.value | json}}

这将帮助您一次显示一页。如果不存在下一个表单，它将创建一个新表单。单击“上一步”，它将导航到旧表单。
尝试达到您的要求：除了UI部分。我希望你能按照你的要求处理你的用户界面

TS:

从'@angular/core'导入{Component，Input，OnInit}；
从'@angular/forms'导入{FormGroup，FormArray}；
从“/question base”导入{QuestionBase}；
从“./question-control.service”导入{QuestionControlService}；
@组成部分({
选择器：“应用程序动态表单”，
templateUrl:'./dynamic form.component.html'，
提供者：[问题控制服务]
})
导出类DynamicFormComponent在NIT上实现{
@输入（）问题：问题库[]=[]；
表格：表格组；
有效载荷=''；
页码：编号=0；
构造函数（专用qcs:QuestionControlService）{}
恩戈尼尼特（）{
this.form=this.qcs.toFormGroup（this.questions）；
}
onSubmit（）{
this.payLoad=JSON.stringify（this.form.value）；
}
addControls（控件：字符串，索引：任意）{
让array=this.form.get（'myArray'）作为FormArray；
如果（array.length>this.page）{
this.page=this.page+1；
}否则{
让问题：any=this.questions.find（q=>q.key==control）；
让子对象=问题？问题。子对象：null；
if（儿童）
（this.form.get（control）作为FormArray）。push（this.qcs.toFormGroup（children））
this.page=this.page+1；
}
}
RemoveControl（控件：字符串）{
让array=this.form.get（control）作为FormArray；
array.removeAt（array.length-1）；
}
戈巴克（）{
如果（this.page>0）{
this.page=this.page-1；
}
//让array=this.form.get（'myArray'）作为FormArray；
//array.removeAt（array.length-1）；
//函数移到上一步
}
}
HTML:
以前的
下一个
拯救


{{form？.value | json}}

这将帮助您一次显示一页。如果不存在下一个表单，它将创建一个新表单。单击“上一步”，它将导航到旧表单。
因此，您希望从中删除最后添加的控件
电子邮件和下拉列表
控件
  removeControls(control: string){
    let array=this.form.get(control) as FormArray;
    array.removeAt(array.length-1);
  }

    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>

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

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

  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)

  }

<div class="step container" *ngIf="form.valid && nextForm" >
 <form [formGroup]="step2">
  <app-step2 (control)="enableSave($event)"></app-step2>
  <button class="btn btn-primary"  (click)="moveToPrevious()" >Previous</button>
</form>
</div>
<hr>
<button
[disabled]="eSave"
 class="btn btn-primary" (click)="save()">Save</button>
</app-stepper-wrapper>

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