@ericlamb/ng-bs-forms
v0.0.3
Published
Library for using BootStrap with Angular Reactive Forms.
Downloads
5
Readme
Angular BootStrap Forms
Provides components for using Angular Reactive Forms with BootStrap 4.5.
<form [formGroup]="loginForm" (ngSubmit)="submitForm()">
<div class="container">
<app-bs-form-field [formField]="userName" [icon]="'user'" [placeholder]="'username (or email)'"
name="username" [autoFocus]="true">
<app-bs-field-error *ngIf="userName.hasError('required')" [error]="'Username is required.'">
</app-bs-field-error>
</app-bs-form-field>
<app-bs-form-field [formField]="password" [type]="'password'" [icon]="'key'" [placeholder]="'password'"
name="password">
<app-bs-field-error *ngIf="password.hasError('required')" [error]="'Password is required.'">
</app-bs-field-error>
</app-bs-form-field>
</div>
<div class="form-group text-right">
<button class="btn btn-primary" (mousedown)="validateForm()">
<fa-icon [icon]="['fas', 'sign-in-alt']"></fa-icon> Sign In
</button>
</div>
</form>
Text Inputs (app-bs-form-field
)
<app-bs-form-field [formField]="userName" [icon]="'user'" [placeholder]="'username (or email)'" label="Username (or Email)" name="username" [autoFocus]="true">
</app-bs-form-field>
|Input|Description|
|:---|:---|
|formField
|Form field to bind the contents of the input to.|
|placeholder
|Placeholder text to display for an empty input|
|icon
|Font Awesome icon from the free solid icon collection to perpend to the form field.|
|name
|Name to apply to the input.|
|type
|HTML input type to set the input field to.|
|autoFocus
|Input to focus when the control loads. Use once per form.|
|label|Label to apply to the form field.|
Displaying Validation Errors (app-bs-field-error
)
To display validation errors add a app-bs-field-error
under the app-bs-form-field
. Use an ngIf
to control when the error is shown. Set the text to display in the error
input.
Example
<app-bs-field-error *ngIf="password.hasError('required')" [error]="'Password is required.'">
</app-bs-field-error>
Inputs
|Input|Description|
|:---|:---|
|error
|The error to display.|