I have these controls within a group, I want that as soon as an error occurs, it is visualized in the template.
My file .ts:
//... Some stuff
export class FormularioFacturaComponent implements OnInit {
// .... Some stuff
private pcIVA = new FormControl('', [
Validators.required
]);
createForm() {
this.formulario = this.formBuilder.group({
facturasBN: this.formBuilder.group({
lectura: new FormControl('0', [Validators.required]),
copias: new FormControl('0', [Validators.required]),
descuento: new FormControl('0', [Validators.required])
}),
pcIVA: this.pcIVA,
});
}
// .... Some stuff
}
My file.html:
<form [formGroup]="formulario" #form="ngForm">
<div class="content">
<div class="form-group" formGroupName="facturasBN">
<div class="control">
<label for="lecturasBNLectura">Lectura</label>
<input type="text" class="form-control number" #facturasBNlectura formControlName="lectura" currencyFormatterDirective [pressPointDecimal]="false" [setFormat]="true" [setDecimals]="0" />
</div>
<div class="control">
<label for="lecturasBNCopias">Copias</label>
<input type="text" class="form-control number" #facturasBNCopias formControlName="copias" currencyFormatterDirective [pressPointDecimal]="false" [setFormat]="true" [setDecimals]="0" />
</div>
<div class="control">
<label for="lecturasBNDesviacion">Descuento</label>
<input type="text" class="form-control number" #facturasBNDesviacion formControlName="descuento" currencyFormatterDirective [pressPointDecimal]="false" [setFormat]="true" [setDecimals]="0" />
</div>
</div>
<!-- Here I want to ask if there was an error in any control of formGroupName -->
<app-field-error-display [displayError]="formulario.controls['facturasBN'].errors" errorMsg="the fields marked in red are obligatory"></app-field-error-display>
<div class="control">
<label>% IVA</label>
<input type="text" class="form-control number" #lecturasPCIVA formControlName="pcIVA" currencyFormatterDirective [pressPointDecimal]="true" [setFormat]="true">
</div>
<button type="submit" [disabled]="!formulario.valid" class="btn btn-primary boton" style="float:right;" (click)="onClick()">
<span class="glyphicon glyphicon-floppy-disk"></span> Guardar
</button>
</div>
</form>
When I ask if there was an error in the formGroupName:
formulario.controls['facturasBN'].errors"
the error is not displayed
Any idea?