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.

Directives

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'

An abstract class that form controls must implement to be used with the DaffFormFieldComponent.

Note This is 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: 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
}