J'essaie de créer un formulaire simple en plusieurs étapes (étape 1, 2 3). J'utilise * ngIf pour masquer et afficher les étapes. Voici ce que j'ai essayé.

Ceci est mon composant.html

<div *ngIf="step1" class="step1">
<h1>STEP 1<h1>
</div>

<div *ngIf="step2" class="step2">
<h1>STEP 2<h1>
</div>

<div *ngIf="step3" class="step3">
<h1>STEP 3<h1>
</div>
<div class="button-container">
<button class="float-left" (click)="stepBackward()" >Back</button>
<button class="float-right" (click)="stepForward()">Next</button>
</div>

Ceci est mon composant.ts

import { Component, Inject, OnInit, Renderer2 } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-step-builder',
  templateUrl: './step-builder.component.html',
  styleUrls: ['./step-builder.component.scss']
})
export class StepBuilderComponent implements OnInit {

 constructor(private pageTitle: Title,
    private router: Router,
    private fb: FormBuilder,
    private http: HttpClient,
    @Inject(ENV_TOKEN) private ENV: any,
    private renderer: Renderer2,
    private snackBarService: SnackbarService){}
    stepCounter = 0;
    step1 = true; step2 = false; step3 = false;
    stepArray = new Array();

   stepForward() {

    this.stepArray[this.stepCounter] = false;       
    console.log(this.stepCounter);
    this.stepCounter++;
    
    this.stepArray[this.stepCounter] = true;
    console.log(this.stepCounter);
  }

  stepBackward() {
    console.log(this.stepCounter);
    this.stepArray[this.stepCounter] = false;
   
    this.stepCounter--;
    console.log(this.stepCounter);
  }

}

Donc, fondamentalement, ce que j'essaie de faire, c'est que j'ai un stepCounter qui est à 0 au début, et lorsque je clique sur Transférer le compteur, tout en essayant de masquer le conteneur actuel (étape1) en définissant le this.step1 à false, j'ai utilisé un tableau pour stocker step1, step2 & step3 et en utilisant stepCounter comme index, j'ai essayé de définir la valeur sur false pour l'étape actuelle. Cependant, cela ne cache pas le div, la valeur de step1 est false, mais div n'est pas masqué. Toute cette approche peut sembler idiote. Existe-t-il un moyen meilleur et simple d'atteindre la fonctionnalité?

0
Arun- 22 oct. 2020 à 10:42

2 réponses

Meilleure réponse

Vous ne changez jamais les booléens step-n. Je recommande une approche de cas de commutation ici.

<div [ngSwitch]="stepIndex">
  <h1 *ngSwitchCase="1">Step 1</h1>
  <h1 *ngSwitchCase="2">Step 2</h1>
  ...
</div>
<div class="button-container">
  <button class="float-left" (click)="stepBackward()" >Back</button>
  <button class="float-right" (click)="stepForward()">Next</button>
</div>

Vous n'avez besoin que de l'index des étapes (à partir de 1) ici. Pas besoin de step ou step Array.

2
MoxxiManagarm 22 oct. 2020 à 07:56

Votre modèle utilise la mauvaise liaison de données. Il devrait aimer:

<div *ngIf="stepArray[0]" class="step1">
<h1>STEP 1<h1>
</div>

<div *ngIf="stepArray[1]" class="step2">
<h1>STEP 2<h1>
</div>

<div *ngIf="stepArray[2]" class="step3">
<h1>STEP 3<h1>
</div>

Et dans le modèle, vous devez définir un tableau

export class StepBuilderComponent implements OnInit {

    stepCounter = 0;
    stepArray = [true, false, false];

   stepForward() {
    this.stepArray[this.stepCounter] = false;       
    this.stepCounter++;
    if(this.stepCounter > this.stepArray.length - 1) {
       this.stepCounter = this.stepArray.length - 1;
    }
    
    this.stepArray[this.stepCounter] = true;
  }

  stepBackward() {
    this.stepArray[this.stepCounter] = false;
    this.stepCounter--;
    if(this.stepCounter < 0) {
       this.stepCounter = 0;
    }
    this.stepArray[this.stepCounter] = true;
  }

}
1
ttquang1063750 22 oct. 2020 à 07:58