Text field

Text fields allow users to enter or edit text in order to provide information.

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