Saltar al contenido

Diseño de materiales: paso a paso, ¿cómo eliminar/deshabilitar pasos?

Al fin después de tanto batallar pudimos dar con el resultado de este atasco que tantos usuarios de nuestro espacio tienen. Si deseas aportar algún detalle puedes dejar tu información.

Solución:

Así que me las arreglé con esta solución alternativa:
https://github.com/angular/material2/issues/7700#issuecomment-336138411

1) Hacer una referencia al paso a paso:


2) Luego, en el lado .ts:

import  ViewChild  from '@angular/core';
import  MatVerticalStepper  from '@angular/material';

@ViewChild('stepper') stepper: MatVerticalStepper;

clearAdditionalForms(): void 
  this.inventoryForms = [];
  this.stepper._stateChanged(); // <- this : Marks the component to be change detected.

Esto es llamar a un método privado, lo que probablemente sea una muy mala idea, así que si tiene una solución mejor/correcta, hágamelo saber y cambiaré la respuesta.

Una forma un poco más angular, evitando el método privado, es registrar lo que necesita hacer en el control de formulario utilizado por el paso. Entonces, por ejemplo, digamos que tenemos un paso:

  
    

Luego defina su grupo de formularios:

this.secondFormGroup = this._formBuilder.group(
  check: [false, Validators.requiredTrue]
);

Ahora hemos definido un pseudo elemento "verificar", que será validado por el paso. Digamos que configuramos algo con una función de clic:

  doClick(item) 
     this.secondFormGroup.controls.check.setValue(item === 'thevalue');     
  

El material angular ahora hará el resto, no podrá pasar del paso hasta que el elemento === el valor.

Agrega *ngIf en cada paso


Puntuaciones y comentarios

Si sostienes alguna desconfianza o disposición de progresar nuestro crónica te proponemos ejecutar una apostilla y con placer lo observaremos.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *