Estoy realizando un reporte que incluye filtros multinivel
(tres niveles), por defecto carga la lista de Sedes de la universidad, al seleccionar la sede de universidad, en el siguiente select
salen las FACULTADES
, al seleccionar una faculta salen las ESCUELAS
, selecciona la escuela y al dar click
en Buscar
, buscará todos los alumnos SEGUN (SEDE - FACULTAD - ESCUELA).
Hasta ahora realizo todo ese flujo.
Pero si el usuario ya cargo todo los select
y cambia de SEDE (PRIMER FILTRO) el SELECT de FACULTAD debe de limpiarse y de ESCUELA debe estar sin ningun <option>
cargado.
COMO ELIMINAR LOS OPTION DEL SELECT
DE ESCUELA? Para hacer de nuevo la petición al back
?
PD: uso nebular(es como bootstrap) omitir.
reporte-alumno.component.ts
import { ChangeDetectionStrategy,Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {ReporteAlumnoService} from '../../services/reporte-alumno.service';
@Component({
selector: 'app-reporte-alumno',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './reporte-alumno.component.html',
styleUrls: ['./reporte-alumno.component.css']
})
export class ReporteAlumnoComponent implements OnInit {
miForm: FormGroup;
sedes: any[]=[];
facultades: any[]=[];
escuelas: any[]=[];
constructor(
private reportAlumnoService:ReporteAlumnoService,
private fb:FormBuilder)
{
this.reportForm();
}
ngOnInit(): void {
this.reportAlumnoService.getSede().subscribe( sedes => {
this.sedes = sedes;
});
}
onFacultad(_sede):void {
this.reportAlumnoService.getFacultad(_sede)
.subscribe( facultades => {
this.facultades = facultades;
});
}
onEscuela(_facultad):void {
this.reportAlumnoService.getSede(_facultad).subscribe( escuelas => {
this.escuelas = escuelas;
});
}
buscar(){
this.reportAlumnoService.getAlumnos(this.mainForm.getRawValue())
.subscribe( resp => {
console.log(resp);
});
}
reportForm(){
this.miForm = this.fb.group({
id_sede:['',Validators.required],
id_facultad:['',Validators.required],
id_escuela:['',Validators.required]
});
}
}
reporte-alumno.component.html
<nb-card accent="primary">
<nb-card-header class="row pt-2 pl-3 pb-0 border-bottom-0">
<div class="col-md-6 mt-3"><strong>Reporte de alumnos por EP</strong></div>
</nb-card-header>
<nb-card-body>
<form [formGroup]="miForm">
<div class="row">
<div class="col-lg-3 col-md-6 col-12">
<div class="form-group">
<label class="label">Sedes - UNI</label>
<nb-select formControlName="id_sede" (ngModelChange)="onFacultad($event)" placeholder="Escoja una sede">
<nb-option *ngFor="let sede of sedes" [value]="sede.id_sede" >{{sede.nombre}}</nb-option>
</nb-select>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="form-group">
<label class="label">Facultades</label>
<nb-select placeholder="Escoja una facultad" formControlName="id_facultad" (ngModelChange)="onEscuela($event)">
<nb-option *ngFor="let facultad of facultades" [value]="facultad.id_facultad" >{{facultad.nombre}}</nb-option>
</nb-select>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="form-group">
<label class="label">Escuelas</label>
<nb-select placeholder="Escoja una escuela" formControlName="id_escuela">
<nb-option *ngFor="let escuela of escuelas" [value]="escuela.id_escuelas" >{{escuela.nombre}}</nb-option>
</nb-select>
</div>
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 col-md-3">
<button nbButton (click)="buscar()" status="primary">Buscar</button>
</div>
</div>
</div>
</div>
</form>
</nb-card-body>
</nb-card>