I have a parent component, inside it I have three sibling components (sons of the father), I have tried to perform the form validations from the parent component using "FormBuilder" and "Validators" but it does not show me the red underline (mat -error).
This is the code I am using in the parent component:
<app-nav-header (onChangeEvent)="changeEvent($event)" (onCallMethod)="onActionMethod($event)"></app-nav-header>
<app-datos-generales *ngIf="evento == 0" (onChangeEvent)="changeEvent($event)" (eventClicked)="childEventClicked($event)" [data]="data"></app-datos-generales>
<app-datos-servicio *ngIf="evento == 0" (onChangeEvent)="changeEvent($event)" [data]="data"></app-datos-servicio>
<app-servicios-involucrados *ngIf="evento == 0" (onChangeEvent)="changeEvent($event)" [data]="data"></app-servicios-involucrados>
import { Component, OnInit, ViewChild } from '@angular/core';
import { SolicitudService } from "./shared/solicitud.service";
import { EVENTO } from '../../../core/common/constants';
import { ServiciosInvolucradosComponent } from '../../../components/servicios-involucrados/servicios-involucrados.component';
import { DatosGeneralesComponent } from '../../../components/datos-generales/datos-generales.component';
@Component({
selector: 'app-solicitud',
templateUrl: './solicitud.component.html',
styleUrls: ['./solicitud.component.css']
})
export class SolicitudComponent implements OnInit {
@ViewChild(ServiciosInvolucradosComponent) serviciosInvolucradosComponent: ServiciosInvolucradosComponent;
@ViewChild(DatosGeneralesComponent) datosGeneralesComponent: DatosGeneralesComponent;
public evento: EVENTO;
public data: any = {};
constructor(private solicitudService: SolicitudService) { }
ngOnInit() {
this.data.codServicio = 0;
this.evento = EVENTO.new;
}
childEventClicked(event: any) {
this.data = event;
this.serviciosInvolucradosComponent.listaSelectServiciosInvolucrados(this.data.codServicio);
}
changeEvent(evento: any) {
this.evento = evento.evento;
//this.clearTitlebar();
//this.titlebarComponent.data = evento.data;
switch (this.evento) {
case EVENTO.list:
//this.setTitleListar();
break;
case EVENTO.new:
//this.setTitleInsertar();
break;
case EVENTO.edit:
//this.setTitleEditar(evento.data);
break;
case EVENTO.view:
//this.setTitleConsultar(evento.data);
break;
default:
break;
}
}
public onActionMethod(event: any) {
let action: number = event.action;
let valor: number = event.valor;
switch (action) {
case 1:
this.insertarRequerimiento(valor);
break;
default:
break;
}
}
insertarRequerimiento(value: number) {
let valor : boolean = this.datosGeneralesComponent.formGrupNewRequerimientoSubmit(null);
alert(valor);
}
}This is the code of the app-nav-header where the Save button is:
<mat-form-field>
<mat-select placeholder="Tipo de Incidencia" (ngModelChange)="onChangeTipoIncidencia($event)" [(ngModel)]="tipIncidenciaDefault">
<mat-option *ngFor="let item of dataIncidencia" [value]="item.id">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-button (click)="onClickGuardarFormulario()" color="primary">GUARDAR</button>
<button mat-button color="accent">CANCELAR</button>This is the typescript code of the app-nav-header where the Save button makes an emit where it passes values so that the save function that is found in another child component is executed (general-data-app):
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-nav-header',
templateUrl: './nav-header.component.html',
styleUrls: ['./nav-header.component.css']
})
export class NavHeaderComponent implements OnInit {
@Output() onChangeEvent: EventEmitter<any> = new EventEmitter();
@Output() onCallMethod: EventEmitter<any> = new EventEmitter();
constructor() { }
ngOnInit() {}
onClickGuardarFormulario() {
this.onCallMethod.emit({ "action": 1, "valor": 259 });
}
}This is the code of the app-general-data where the form is:
<form [formGroup]="formGrupNewRequerimiento" (ngSubmit)="formGrupNewRequerimientoSubmit(formGrupNewRequerimiento)">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<mat-form-field class="example-full-width">
<mat-select placeholder="Gerencia" formControlName="codGerencia">
<mat-option *ngFor="let item of dataGerencia" [value]="item.id">
{{item.name}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGrupNewRequerimiento.get('codGerencia').hasError('min')">
Campo Obligatorio
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-4">
<mat-form-field class="example-full-width">
<mat-select placeholder="Servicios" formControlName="codServicio" (ngModelChange)="onChangeServicio($event)">
<mat-option *ngFor="let item of dataServicio" [value]="item.id">
{{item.name}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGrupNewRequerimiento.get('codServicio').hasError('min')">
Campo Obligatorio
</mat-error>
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field class="example-full-width">
<input matInput placeholder="Texto Prueba" formControlName="nombrePrueba">
</mat-form-field>
<mat-error *ngIf = "formGrupNewRequerimiento.get('nombrePrueba').hasError('required')">
{{ obligatorioMsg }}
</mat-error>
</div>
</div>
</div>
</form>This is the typescript code of the app-general-data where the save function is:
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { GeneralService } from "../shared/general.service"
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-datos-generales',
templateUrl: './datos-generales.component.html',
styleUrls: ['./datos-generales.component.css']
})
export class DatosGeneralesComponent implements OnInit {
@Output() eventClicked: EventEmitter<any> = new EventEmitter();
@Input() data: any;
public dataCentroCosto: any = [];
public dataGerencia: any = [];
public dataServicio: any = [];
public tipServicioDefault: number;
public formGrupNewRequerimiento: FormGroup;
constructor(public fb: FormBuilder, private generalService: GeneralService) { }
ngOnInit() {
this.listaSelectGerencia();
this.listaSelectServicio();
this.setValuesFormBuilder();
}
private setValuesFormBuilder() {
this.formGrupNewRequerimiento = this.fb.group({
codGerencia: [0, Validators.compose([
Validators.min(1)
])],
codServicio: [0, Validators.compose([
Validators.min(1)
])],
nombrePrueba: ['', Validators.compose([
Validators.required
])],
});
}
public formGrupNewRequerimientoSubmit(event: any): boolean {
if ((this.formGrupNewRequerimiento.invalid)) {
return true;
} else {
return false;
}
}
private listaSelectGerencia(): void {
this.generalService.listaSelectGerencia()
.subscribe(res => {
this.dataGerencia = res;
},
error => {
throw error;
},
() => {});
}
private listaSelectServicio(): void {
this.generalService.listaSelectServicio()
.subscribe(res => {
this.dataServicio = res;
},
error => {
throw error;
},
() => {});
}
onChangeServicio(event: any) {
debugger;
this.data = { "codServicio": event }
this.eventClicked.emit(this.data);
}
}