Form Field

Form field is a wrapping component that provides consistent styling and behavior for form control elements.

Components

DaffFormFieldComponent

import { DaffFormFieldComponent } from '@daffodil/design/form-field'

DaffFormFieldComponent is a wrapping component that provides consistent styling and behavior for form control elements.

@Component()
class DaffFormFieldComponent implements AfterContentInit, AfterContentChecked, AfterViewInit {
  elementRef: ElementRef<any>

  appearance: InputSignalWithTransform<DaffFormFieldAppearance, "" | "fluid" | "fixed"> = input(DaffFormFieldAppearanceEnum.Fluid, {
      transform: (value: DaffFormFieldAppearance | '' | null | undefined) =>
        value || DaffFormFieldAppearanceEnum.Fluid,
    })
  id: InputSignal<string> = 'daff-form-field-' + ++daffFormFieldId
  @Input() skeleton: boolean = false
}

Inputs

appearance

InputSignalWithTransform<DaffFormFieldAppearance, "" | "fluid" | "fixed">

Default	`input(DaffFormFieldAppearanceEnum.Fluid, { transform: (value: DaffFormFieldAppearance \| '' \| null \| undefined) => value \|\| DaffFormFieldAppearanceEnum.Fluid, })`
Description	The appearance of the form field. Defaults to `fluid`.

InputSignal<string>

Default 'daff-form-field-' + ++daffFormFieldId

Description

Default	`'daff-form-field-' + ++daffFormFieldId`
Description	The unique id of the form field. Defaults to an autogenerated value. When using this, it's your responsibility to ensure that the id for each form field is unique. It gets assigned to the `for` attribute on the `<label>` inside of the form field.

The unique id of the form field. Defaults to an autogenerated value. When using this, it's your responsibility to ensure that the id for each form field is unique.

It gets assigned to the for attribute on the <label> inside of the form field.

skeleton

boolean

Default	`false`
Description	Controls whether the component displays a skeleton loading state.

Directives

DaffFormFieldActionDirective

import { DaffFormFieldActionDirective } from '@daffodil/design/form-field'

DaffFormFieldActionDirective marks an element, typically a button, as an action attached to a form control inside DaffFormFieldComponent.

@Directive()
class DaffFormFieldActionDirective {}

Modules

DaffFormFieldModule

Deprecated

import { DaffFormFieldModule } from '@daffodil/design/form-field'

@NgModule()
class DaffFormFieldModule {}

Types

DaffFormFieldControlTypesEnum

import { DaffFormFieldControlTypesEnum } from '@daffodil/design/form-field'

The types of controls that can be used inside a form field.

'input': A control that the user types into, like an input or a textarea.
'dropdown': A control that opens a list of options, like a select.

enum DaffFormFieldControlTypesEnum {
  Input = DaffFormFieldControlTypesEnum.Input,
  Dropdown = DaffFormFieldControlTypesEnum.Dropdown,
}

Helpers

DaffFormFieldControl

import { DaffFormFieldControl } from '@daffodil/design/form-field'

Form controls must extend this class to be used inside DaffFormFieldComponent.

Note The control is defined as an abstract class instead of an interface to support Angular's dependency injection. Interfaces are erased during TypeScript compilation and cannot be used as DI tokens.

By using an abstract class, the Angular DI container can match the class token for injection.

abstract class DaffFormFieldControl<<T>>  {
  abstract readonly controlType: DaffFormFieldControlTypesEnum
  readonly supportsAutoLabelling: boolean = true
  abstract readonly focused: boolean
  abstract readonly required: boolean
  abstract readonly disabled: boolean
  readonly id: string
  get raised(): boolean
  get opened(): boolean
  abstract readonly value: T
  ngControl: NgControl | null
  get state(): DaffFormFieldState
  _stateChanges: BehaviorSubject = new BehaviorSubject({
      focused: false,
      filled: false,
      disabled: false,
      error: false,
      valid: true,
    })
  stateChanges: Observable<DaffFormFieldState>

  abstract focus(event?: Event): void
  emitState(deferred: boolean = false): void
}