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

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

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

最佳答案

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

10-05 20:36
查看更多