Pb-error-message NPM

PbErrorMessage

This library was generated with Angular CLI version 15.0.0.

Description

Compatible with Bootstrap 4

Component lib-pb-error-message created with the aim of making it easier for developers to separate small parts on a page. In this component there are 2 input properties,

control : Mandatory. Required for spesific control inside of Angular Form.
is-submit : Mandatory. Determines error messages will be shown when form is submitted or not. This input has boolean data type with default value is false. It means that error messages won't be shown when submit button is not fired. This value should be send from Form Reference. So, in your form tag inside HTML page should have a reference like #formRefSample or #something.

Usage Example

control : forms.controls.sampleControl
is-submit : formRefSample.submitted

// file.component.ts
sampleForm = this.fb.group({
  sampleControl: ['', Validators.required]
});

<!-- file.component.html-->
<form [formGroup]="sampleForm" (ngSubmit)="sampleForm.valid && onSubmit()" #formRefSample="ngForm">
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label>Sample Control</label>
      <input type="text" class="form-control"
        formControlName="sampleControl"
        [ngClass]="{ is-invalid': forms.controls.required.invalid && formRefSample.submitted }"
      />
      <lib-pb-error-message [control]="sampleForm.controls.sampleControl" [is-submit]="formRefSample.submitted">
      </lib-pb-error-message>
    </div>
  </div>
</form>