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'

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

  @Input() @HostBinding() skeleton: boolean = false
  @Input() appearance: DaffFormFieldApperanace
  @Input() id: string = 'daff-form-field-' + ++daffFormFieldId
}

Inputs

skeleton

boolean

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

appearance

DaffFormFieldApperanace

Default	–
Description	The appearance style of a form field, whether the label is fluid or fixed.

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.

DaffErrorMessageComponent

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

@Component()
class DaffErrorMessageComponent {}

DaffHintComponent

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

@Component()
class DaffHintComponent {
  @Input() @HostBinding() validated: boolean = false
}

Inputs

validated

boolean

Default	`false`
Description	Displays a validated hint UI.

Directives

DaffFormFieldLabelDirective

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

@Directive()
class DaffFormFieldLabelDirective {}

DaffFormFieldActionDirective

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

@Directive()
class DaffFormFieldActionDirective {}

Modules

DaffFormFieldModule

Deprecated

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

@NgModule()
class DaffFormFieldModule {}

Helpers

DaffFormFieldControl

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

The class that a form control must implement in order to be used with the DaffFormFieldComponent.

You may ask: "Why are you implementing an abstract class, not extending it?" We do this so that the Angular DI container can match the class token. A typical interface would be "more accurate" here, but since interfaces don't exist in javascript, they get thrown out by the typescript compiler and cannot be used for the necessary dependency injection.

abstract class DaffFormFieldControl<<T>>  {
  abstract readonly controlType: any
  readonly supportsAutoLabelling: boolean = true
  abstract readonly focused: boolean
  abstract readonly required: boolean
  abstract readonly disabled: boolean
  readonly id: string
  get raised(): 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
}