3.0.0 • Published 2 years ago

@terminus/ui-form-field v3.0.0

Weekly downloads
22
License
MIT
Repository
github
Last release
2 years ago

CI/CD Status Codecov MIT License
NPM version Library size

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-autocomplete

CSS 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>
3.0.1

2 years ago

3.0.0

3 years ago

2.1.1

3 years ago

2.1.0

4 years ago

2.0.14

4 years ago

2.0.13

4 years ago

2.0.12

4 years ago

2.0.11

4 years ago

2.0.9

4 years ago

2.0.10

4 years ago

2.0.8

4 years ago

2.0.7

4 years ago

2.0.6

4 years ago

2.0.5

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.1

4 years ago