2
votes

Comment déplacer le stepper d'une étape à la deuxième étape en utilisant un matériau angulaire et angulaire

J'ai un formulaire en 2 à 4 étapes. J'avais séparé le formulaire comme ci-dessous la structure. Il y a d'abord le dossier auth sous le dossier register . Sous ce registre - register.ts et register.html . Sous register.html j'avais implémenté mat stepper comme ci-dessous:

import { MatStepper } from '@angular/material/stepper';
completed=false;
@ViewChild('stepper') stepper: MatStepper;
onSubmit(){

    this.stepper.selected.completed = true;
    this.stepper.next();
  }

sous mon register.ts :

<form class="kt-form" [formGroup]="steponeForm" autocomplete="off" (ngSubmit)="onSubmit()">
            <div class="kt-portlet__body" >
                //MY FORM
            </div>
                 // submit button
            <button mat-button matStepperNext color="primary" type="submit">Next</button>

</form>

Maintenant ceci est mon formulaire de l'étape 1 qui est un module séparé et là j'ai implémenté le bouton Suivant.

Maintenant, quand j'ai implémenté isLinear = true; code > alors même après avoir rempli le formulaire entier, il ne passe pas à l'étape suivante. Si je n'ai pas rempli le formulaire, il fonctionne selon les attentes en mettant en évidence les fichiers avec du rouge

Pour ref, voici code:

export class RegisterComponent implements OnInit, OnDestroy {
  isLinear = true;
}

Puisque j'utilise angular pour la première fois, veuillez me dire où je me trompe dans cette approche.

Mise à jour de KT-STEPONE.ts:

 <mat-horizontal-stepper [linear]="isLinear" #stepper>

                    <mat-step [stepControl]="firstFormGroup">
                      <form [formGroup]="firstFormGroup">
                        <ng-template matStepLabel> step 1 </ng-template>
                        <mat-card class="example-card">
                                <mat-card-header>
                                    <div mat-card-avatar class="example-header-image"></div>
                                    <mat-card-title>step 1</mat-card-title>
                                </mat-card-header>
                                <mat-card-content>
                                        <kt-stepone></kt-stepone>
                                </mat-card-content>

                        </mat-card>

                        <div>

                        </div>
                      </form>
                    </mat-step>

                    <mat-step [stepControl]="secondFormGroup">
                      <form [formGroup]="secondFormGroup">
                        <ng-template matStepLabel> step 2 </ng-template>
                            <mat-card class="example-card">
                                <mat-card-header>
                                    <div mat-card-avatar class="example-header-image"></div>
                                    <mat-card-title>step 2</mat-card-title>
                                </mat-card-header>
                                <mat-card-content>
                                        <kt-steptwo></kt-steptwo>
                                </mat-card-content>
                            </mat-card>

                      </form>
                    </mat-step>

angular angular7 angular-material-stepper mat-stepper

0 commentaires

3 Réponses :

1
votes

Je pense que votre stepper et kt-stepone ne communiquent pas. essayez d'implémenter un service ou un @inpit @output pour définir l'étape valide. ou si votre logique est séparée, vous pouvez supprimer le [stepControl] et set completed = "false" et dans votre composant

@ViewChild('stepper') stepper: MatStepper;
onButton() {
  this.stepper.selected.completed = true;
  this.stepper.next();
}

6 commentaires

Où devrais-je inclure @ViewChild ('stepper') stepper: MatStepper; . Dois-je l'inclure avant le constructeur dans la classe OU avant la classe elle-même? En outre, MatStepper signifie son MatStepperModule? @Lean Pilar

Veuillez trouver le kt-stepone.ts mis à jour selon vos instructions. mais ça passe à l'étape suivante même si les champs sont vides @Lean Pilar

à l'intérieur de la classe avant le constructeur de la classe où vous utilisez le mat-horizontal-stepper

mat-horizontal-stepper est dans mon registre principal.html. De mat-horizontal-stepper, j'ai supprimé le [stepControl] . où dois-je ajouter completed = "false" , je veux dire quel fichier ts: register ou kt-stepone @Lean Pilar

remplacez [stepControl] = ... par completed = "false". mais si vous n'avez pas de bouton sur le stepper mais que vous êtes à l'intérieur, essayez d'émettre un événement du kt-stepone vers le stepper pour écouter l'événement et déclencher la fonction onButton

Ok essaiera de le faire. Ce sera utile si vous pouvez m'aider avec un exemple.

0
votes

Après RnD à ce sujet. J'avais finalement eu la solution de travail de ceci. Veuillez suivre ce lien . La façon de faire est la suivante: Nous devons relier le composant à chaque étape dans le composant de registre. Voici le guide pour cela.

0 commentaires

0
votes

<mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel> step 1 </ng-template>
        <mat-card class="example-card">
            <mat-card-header>
                <div mat-card-avatar class="example-header-image"></div>
                <mat-card-title>step 1</mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <kt-stepone></kt-stepone>
            </mat-card-content>

        </mat-card>

        <div>

        </div>
    </form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel> step 2 </ng-template>
        <mat-card class="example-card">
            <mat-card-header>
                <div mat-card-avatar class="example-header-image"></div>
                <mat-card-title>step 2</mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <kt-steptwo></kt-steptwo>
            </mat-card-content>
        </mat-card>

    </form>
</mat-step>

0 commentaires