@talenra/components documentation
  1. Components
  2. FormFieldComponent

File

form-field/src/form-field/form-field.component.ts

Description

<talenra-form-field> is a wrapper for form inputs.

  • implements the label associated with the input
  • adds a hook to display validation errors
  • shows an optional hint text
  • injects consistent styling and behaviour for different inputs

Minimal example:

Example :
<talenra-form-field label="Email">
  <input talenra-input formControlName="email" type="email" />
</talenra-form-field>

Example using a hint text and validation errors:

Example :
<talenra-form-field label="Email">
  <input talenra-input formControlName="email" type="email" required />
  <talenra-form-error [isVisible]="emailEmpty">This field is required.</talenra-form-error>
  <talenra-form-error [isVisible]="emailInvalid">Email address is invalid.</talenra-form-error>
</talenra-form-field>

Import

Example :
import { FormFieldComponent } from '@talenra/components/form-field';

../../../#/input

See FormErrorComponent

Implements

AfterContentInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector talenra-form-field
imports ControlContainerComponent FormFieldResetComponent
styleUrls ./form-field.component.scss
templateUrl ./form-field.component.html

Index

Inputs

Inputs

handleTerminatedValues
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Determines whether Form Field shall handle terminated values. Handling terminated values is currently supported for Select only. To prevent overhead and to give consuming apps control, this is an opt-in feature.

Example :
<talenra-form-field ... handleTerminatedValues></talenra-form-field>

See SelectComponent See OptionComponent's terminated property
hideClearButton
Default value : false, { transform: booleanAttribute }

Suppress the clear button which is displayed by default if the input has a value and is focused.

Example :
<talenra-form-field ... hideClearButton></talenra-form-field>
hint
Type : string
Default value : ''

Optional hint text displayed to the user

Example :
<talenra-form-field ... hint="Leave blank if not applicable"></talenra-form-field>
label
Type : string
Default value : ''

Label displayed to the user

Example :
<talenra-form-field ... label="Email"></talenra-form-field>
size
Type : TFormFieldSize
Default value : FormFieldSize.M

Determines the size of FormField and the wrapped control. Defaults to m.

Example :
<talenra-form-field ... size="s"></talenra-form-field>

See FormFieldSize

results matching ""

    No results matching ""