繁体   English   中英

步骤向导形式

Step wizard form

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在使用角度动态表格进行角度应用,在这里我需要将表格分为两部分。

在第一页中我输入了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。

请帮助我实现结果。卡住了很长时间..

4 个回复

在要删除的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)

  }

如果要创建步进表单,则可以投影表单并使用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

尝试达到您的要求: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>

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

因此,您要从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

1 多步骤形式的部分验证(向导)

我有一个使用向导创建的多步表单。 基本上,表单的第一步是 user/sign_up - 在我看来,这还不是一步。 点击注册按钮后,用户移动到“真实”的第一步,即:address. 这基本上是表格的结尾。 全部保存给用户。 现在我坚持验证。 我很想在我的模型中使用条件验证,并且只在某个步骤中验 ...

2 jQuery-多步骤向导形式

我有一个简单的向导表单,可逐步浏览。 我知道那里有很多插件,但我只想自己动手。 我的&gt;&gt;按钮有问题,该按钮应该显示下一步。 这是完整的示例JS BIN ...

5 Wicket向导步骤的基本实现

wicket 6.20是否提供任何基本实现( 如此图所示)或步骤概述功能( 如果其他方法不起作用) ? 在查看文档时,我找不到与之接近的任何内容,因此我首先进行了自己的实现,例如 获取列表中所有可能的步骤。 现在,我将继续获取当前面板的索引(如果可能),并通过isColmplete ...

6 使用流星向导步骤?

我正在使用planficca向导,其中向导步骤位于我的向导之上,按下当我按下“下一步”时它将移动到下一步。 我希望步骤在步骤体的左侧。 我的向导目前看起来像这样: 但是我想要这样的东西: ...

7 如何重置primefaces向导的步骤?

我使用 primefaces &lt;p:wizard&gt;并且我一步一步注册。如果注册成功结束,向导的步骤是第一步,但是如果我继续寻找新记录或用户,向导将无法添加新记录。它正在更新以前的记录/用户相反。如何连续添加新记录? 另一个问题; 当它返回到第一步时,它不能重置该字段。我该怎么做? 它的提 ...

8 动态添加向导步骤

我正在从( https://github.com/mgonto/angular-wizard/ )使用Angular-Wizard 。 效果很好。 尽管现在,在我的下一个案例中,我需要动态添加步骤或向导。 基本上,我有一个从数据库中获取的JSON数据,基于此,我想创建具有多个步骤的向导。 ...

9 步骤向导验证

我在步骤向导表单中创建了一些验证输入,但是当我尝试验证输入字段时出现错误,它给我一个错误: 这是我的JS: ...

10 ASP向导步骤

我不是特别精通ASP,所以我可能会遗漏一些明显的东西。 我有一系列在asp中使用wizardstep进行处理的网页。 在返回的HTML标记中,有一些问题引起了我对可访问性的注意。 问题是返回的HTML表基本上是使用属性而不是css样式来显示数据。 我无法在asp代码中看到指定这些属性的任 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM