Class MatFormField

src/material/form-field/form-field.ts:187–830

  ],
})
export class MatFormField
  implements FloatingLabelParent, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy
{
  _elementRef = inject(ElementRef);
  private _changeDetectorRef = inject(ChangeDetectorRef);
  private _platform = inject(Platform);
  private _idGenerator = inject(_IdGenerator);
  private _ngZone = inject(NgZone);
  private _defaults = inject<MatFormFieldDefaultOptions>(MAT_FORM_FIELD_DEFAULT_OPTIONS, {
    optional: true,
  });
  private _currentDirection!: Direction;

  @ViewChild('textField') _textField!: ElementRef<HTMLElement>;
  @ViewChild('iconPrefixContainer') _iconPrefixContainer!: ElementRef<HTMLElement>;
  @ViewChild('textPrefixContainer') _textPrefixContainer!: ElementRef<HTMLElement>;
  @ViewChild('iconSuffixContainer') _iconSuffixContainer!: ElementRef<HTMLElement>;
  @ViewChild('textSuffixContainer') _textSuffixContainer!: ElementRef<HTMLElement>;
  @ViewChild(MatFormFieldFloatingLabel) _floatingLabel: MatFormFieldFloatingLabel | undefined;
  @ViewChild(MatFormFieldNotchedOutline) _notchedOutline: MatFormFieldNotchedOutline | undefined;
  @ViewChild(MatFormFieldLineRipple) _lineRipple: MatFormFieldLineRipple | undefined;

  private _iconPrefixContainerSignal = viewChild<ElementRef<HTMLElement>>('iconPrefixContainer');
  private _textPrefixContainerSignal = viewChild<ElementRef<HTMLElement>>('textPrefixContainer');
  private _iconSuffixContainerSignal = viewChild<ElementRef<HTMLElement>>('iconSuffixContainer');
  private _textSuffixContainerSignal = viewChild<ElementRef<HTMLElement>>('textSuffixContainer');
  private _prefixSuffixContainers = computed(() => {
    return [
      this._iconPrefixContainerSignal(),
      this._textPrefixContainerSignal(),
      this._iconSuffixContainerSignal(),
      this._textSuffixContainerSignal(),
    ]
      .map(container => container?.nativeElement)
      .filter(e => e !== undefined);
  });

  @ContentChild(_MatFormFieldControl) _formFieldControl!: MatFormFieldControl<any>;
  @ContentChildren(MAT_PREFIX, {descendants: true}) _prefixChildren!: QueryList<MatPrefix>;
  @ContentChildren(MAT_SUFFIX, {descendants: true}) _suffixChildren!: QueryList<MatSuffix>;
  @ContentChildren(MAT_ERROR, {descendants: true}) _errorChildren!: QueryList<MatError>;
  @ContentChildren(MatHint, {descendants: true}) _hintChildren!: QueryList<MatHint>;

  private readonly _labelChild = contentChild(MatLabel);

  /** Whether the required marker should be hidden. */
  @Input()
  get hideRequiredMarker(): boolean {
    return this._hideRequiredMarker;
  }
  set hideRequiredMarker(value: BooleanInput) {
    this._hideRequiredMarker = coerceBooleanProperty(value);
  }
  private _hideRequiredMarker = false;

  /**
   * Theme color of the form field. This API is supported in M2 themes only, it
   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/form-field/styling.