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

下一个

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

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：

enabled[0] = result.isVerifyAppsEnabled()

这将帮助您一次显示一页。如果不存在下一个表单，它将创建一个新表单。然后单击上一个，它将导航到旧表格。

Answer 4

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

我已将代码添加到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

步骤向导形式

4 个答案: