Este es un componente de Formulario por pasos. Como cualquier asistente de formularios. Puede definir pasos y controlar cómo funciona cada paso. Puede activar/desactivar el botón de navegación según la validez del paso actual. Actualmente, el componente tiene la funcionalidad básica. Se iran implementando más funcionalidades.

Dependencias

• Angular5 (probado con 5.2.0)
• Bootstrap 4

Installación

Después de instalar las dependencias anteriores, instale forms-steps mediante:

$ npm install forms-steps --save

Cómo utilizar el componente

Una vez instalada la librería, puede importarla en AppModule de su aplicación:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Importe su biblioteca
import { FormStepModule } from 'forms-steps';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Agrege aquí el modulo
    FormStepModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Una vez importada su biblioteca, puede utilizar componentes de pasos de formulario y pasos de formulario en su aplicación Angular:

<form-step>
  <form-steps [title]="'Step1'" [isValid]="emailForm.form.valid" (onNext)="onStep1Next($event)">
    <h1>Step1</h1>
    <form #emailForm="ngForm">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"
          [(ngModel)]="data.email" required>
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
    </form>
  </form-steps>
  <form-steps [title]="'Step2'" (onNext)="onStep2Next($event)">
    <h1>Step2</h1>
  </form-steps>
  <form-steps [title]="'Step3'" (onNext)="onStep3Next($event)">
    <h1>Step3</h1>
  </form-steps>
  <form-steps [title]="'Step4'" (onComplete)="onComplete($event)">
    <div [ngSwitch]="isCompleted">
      <div *ngSwitchDefault>
        <h1>Step4</h1>
      </div>
      <div *ngSwitchCase="true">
        <h4>Thank you! You have completed all the steps.</h4>
      </div>
    </div>
  </form-steps>
</form-step>

Licencia

MIT © johabarnpm