Form Field
A field wrapper for form components.
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-autocompleteCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
TsFormFieldComponent is a component used to wrap several other components that could be used within a form and apply common styles.
<ts-form-field
[control]="myControlInstance"
[validateOnChange]="true"
...etc
></ts-form-field>Control
Users can pass in form control to the form field component
<ts-form-field [control]="myFormControl"></ts-form-field>Float label
It defines whether the label should always float or float as the user types. The value can only be set to either always or auto.
<ts-form-field [floatLabel]="always"></ts-form-field>Hide required marker
Define if a required marker should be hidden.
<ts-form-field [hideRequiredMarker]="true"></ts-form-field>Hint
Define a hint for the input.
<ts-form-field [hint]="Please input a number"></ts-form-field>No validation or hint
A flag to define whether this form needs validations or a hint. If it needs validation or hint, space is added for validation message or hint at the bottom.
<ts-form-field [noValidationOrHint]="true"></ts-form-field>Validation trigger
Define if the validation should be shown immediately or on blur.
<ts-form-field [validateOnChange]="true"></ts-form-field>