0

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?

4

1 に答える 1