API
Text Fields are part of our form components.
import { BwcFormModule } from '@aviato/components/form';
Outlined appearance
To apply the outlined appearance on form fields there are some actions to be taken for the consumer. Just follow these steps one by one to get the desired result.
Step 1: Set the property isOutlined to true on the bwc-form-input-container component
<bwc-form-input-container [isOutlined]="true"></bwc-form-input-container>
Step 2a: For a simple input field, set the ng-content selector outline-content on the mat-form-field component.
<mat-form-field outline-content></mat-form-field>
Step 2b: In some cases the info-box is used as well. If that's the case then you need to wrap the content within ng-container and set the selector outline-content on the ng-container
Step 3:Last but not least. When you use mat-hint, replace it with <span translate-hint="">. And make sure this element is outside the element where you put the outline-content selector, but still within bwc-form-input-container.
Services
BwcFormInfoService
Properties
|
Name |
Description |
|---|---|
|
shownBoxes |
|
Methods
|
showInfo |
|
|---|---|
|
Shows the info box for the specified field. The type defines the identifier for the show action. |
|
|
Parameters |
|
|
field any |
|
|
type any |
|
|
forceHide |
|
|---|---|
|
|
|
|
Parameters |
|
|
field any |
|
|
hideInfo |
|
|---|---|
|
|
|
|
Parameters |
|
|
field any |
|
|
type any |
|
|
toggleInfo |
|
|---|---|
|
|
|
|
Parameters |
|
|
field any |
|
|
type any |
|
|
isShown |
|
|---|---|
|
|
|
|
Parameters |
|
|
field any |
|
|
createUniqueId |
|---|
BwcFormDateValidatorService
BwcFormMaxDateValidatorService
BwcFormMinDateValidatorService
Directives
BwcFormCheckboxComponent
selector:bwc-form-checkbox
Properties
|
Name |
Description |
|---|---|
|
componentClass |
|
|
@Input() placeholder |
|
BwcFormDateFieldsComponent
selector:bwc-form-date-fields
Properties
|
Name |
Description |
|---|---|
|
bindClass |
|
|
@Input() locale |
|
|
@Input() disabled |
|
|
@Input() control |
|
|
@Input() yearPlaceholder |
|
|
@Input() yearAriaLabel |
|
|
@Input() monthPlaceholder |
|
|
@Input() monthAriaLabel |
|
|
@Input() dayPlaceholder |
|
|
@Input() dayAriaLabel |
|
|
matInputContainers |
|
|
matInputContainer |
|
|
subFormMatInputContainers |
|
|
dayMatInputContainer |
|
|
dayMatInputContainerFocused |
|
|
localeSpecificDateFormat |
|
|
months |
|
|
subForm |
|
|
ariaDescribedBy |
|
BwcFormPhoneNumberFieldsComponent
selector:bwc-form-phone-number-fields
Properties
|
Name |
Description |
|---|---|
|
bindClass |
|
|
@Input() control |
|
|
@Input() dialCodeControl |
|
|
@Input() phoneControl |
|
|
@Input() dialCodeAriaLabel |
|
|
@Input() phoneAriaLabel |
|
|
@Input() dialCodes |
|
BwcFormErrorComponent
selector:bwc-form-error
Properties
|
Name |
Description |
|---|---|
|
@Input() for |
|
|
parent |
|
|
className |
|
|
attrHidden |
|
|
errorHidden |
|
BwcFormErrorsComponent
selector:bwc-form-errors
Properties
|
Name |
Description |
|---|---|
|
@Input() control |
|
|
@Output() errorShow |
|
|
@Output() errorHide |
|
Methods
|
register |
|
|---|---|
|
|
|
|
Parameters |
|
|
bwcFormErrorComponent BwcFormErrorComponent |
|
BwcFormInfoBoxComponent
selector:bwc-form-info-box
Properties
|
Name |
Description |
|---|---|
|
@Input() infoId |
|
|
@Input() state |
|
|
shown |
|
|
infoService |
|
Methods
|
toggleIsExpanded |
|
|---|---|
|
|
|
|
Parameters |
|
|
targetValue any |
|
BwcFormCalendarIconComponent
Add as matPrefix to the mat-form-field to trigger a assistance-box
selector:bwc-form-calendar-icon
Properties
|
Name |
Description |
|---|---|
|
@Input() infoId |
|
|
@Input() for |
|
|
infoService |
|
Methods
|
toggle |
|
|---|---|
|
|
|
|
Parameters |
|
|
e any |
|
BwcFormInfoIconComponent
Add as matPrefix to the mat-form-field to trigger a assistance-box
selector:bwc-form-info-icon
Properties
|
Name |
Description |
|---|---|
|
@Input() infoId |
|
|
@Input() ariaLabel |
|
|
parent |
|
|
infoService |
|
Methods
|
toggle |
|
|---|---|
|
|
|
|
Parameters |
|
|
e any |
|
BwcFormInputContainerComponent
Wrapping component that controls its content
selector:bwc-form-input-container
Properties
|
Name |
Description |
|---|---|
|
componentClass |
|
|
hasSubscript |
|
|
inputContainer |
|
|
hasInfo |
|
|
matInputContainer |
|
|
isErrorState |
|
|
isInfoBoxExpanded |
|
|
isOutlined |
boolean |
Methods
|
register |
|
|---|---|
|
|
|
|
Parameters |
|
|
child BwcFormInfoIconComponent|BwcFormCalendarIconComponent|BwcFormInfoBoxComponent |
|
BwcFormRadioGroupComponent
selector:bwc-form-radio-group
Properties
|
Name |
Description |
|---|---|
|
componentClass |
|
|
@Input() placeholder |
|
BwcFormSectionHeaderComponent
selector:bwc-form-section-header
Properties
|
Name |
Description |
|---|---|
|
@Input() icon |
|
|
@Input() initials |
|
|
@Input() allowToggle |
|
|
section |
|
Methods
|
toggle |
|
|---|---|
|
|
|
|
Parameters |
|
|
$event any |
|
BwcFormSectionComponent
selector:bwc-form-section
Properties
|
Name |
Description |
|---|---|
|
@Input() isExpanded |
|
|
@Input() hasPopIn |
|
|
isExpandedState |
|
|
@Output() expand |
|
|
@Output() collapse |
|
|
@Output() toggle |
|
|
isAnimating |
|
Methods
|
toggleIsExpanded |
|
|---|---|
|
|
|
|
Parameters |
|
|
forceValue? boolean |
|
|
animationDone |
|---|
|
|
BwcFormSelectComponent
selector:bwc-form-select
Properties
|
Name |
Description |
|---|---|
|
componentClass |
|
|
@Input() placeholder |
|
BwcFormDateValidatorDirective
selector:[bwcDateValidator][formControlName][bwcDateValidator][formControl][bwcDateValidator][ngModel]
Properties
|
Name |
Description |
|---|---|
|
validator |
|
Methods
|
validate |
|
|---|---|
|
|
|
|
Parameters |
|
|
c AbstractControl |
|
|
Returns |
|
|
ValidationErrors | |
|
BwcFormMaxDateValidatorDirective
selector:[bwcMaxDateValidator][formControlName][bwcMaxDateValidator][formControl][bwcMaxDateValidator][ngModel]
Properties
|
Name |
Description |
|---|---|
|
@Input() bwcMaxDateValidator |
|
|
onChange |
|
Methods
|
validate |
|
|---|---|
|
|
|
|
Parameters |
|
|
c AbstractControl |
|
|
Returns |
|
|
ValidationErrors | |
|
BwcFormMinDateValidatorDirective
selector:[bwcMinDateValidator][formControlName][bwcMinDateValidator][formControl][bwcMinDateValidator][ngModel]
Properties
|
Name |
Description |
|---|---|
|
@Input() bwcMinDateValidator |
|
|
onChange |
|
Methods
|
validate |
|
|---|---|
|
|
|
|
Parameters |
|
|
c AbstractControl |
|
|
Returns |
|
|
ValidationErrors | |
|
Examples
Text fields
Prefix
Tooltip
Phone number
Password
Date field
Error states
Text area
Auto complete