Method _initializeControl

src/material/form-field/form-field.ts:457–497

Initializes the registered form field control.

(previousControl: MatFormFieldControl<unknown> | null)

  /** Initializes the registered form field control. */
  private _initializeControl(previousControl: MatFormFieldControl<unknown> | null) {
    const control = this._control;
    const classPrefix = 'mat-mdc-form-field-type-';

    if (previousControl) {
      this._elementRef.nativeElement.classList.remove(classPrefix + previousControl.controlType);
    }

    if (control.controlType) {
      this._elementRef.nativeElement.classList.add(classPrefix + control.controlType);
    }

    // Subscribe to changes in the child control state in order to update the form field UI.
    this._stateChanges?.unsubscribe();
    this._stateChanges = control.stateChanges.subscribe(() => {
      this._updateFocusState();
      this._changeDetectorRef.markForCheck();
    });

    // Updating the `aria-describedby` touches the DOM. Only do it if it actually needs to change.
    this._describedByChanges?.unsubscribe();
    this._describedByChanges = control.stateChanges
      .pipe(
        startWith([undefined, undefined] as const),
        map(() => [control.errorState, control.userAriaDescribedBy] as const),
        pairwise(),
        filter(([[prevErrorState, prevDescribedBy], [currentErrorState, currentDescribedBy]]) => {
          return prevErrorState !== currentErrorState || prevDescribedBy !== currentDescribedBy;
        }),
      )
      .subscribe(() => this._syncDescribedByIds());

    this._valueChanges?.unsubscribe();

    // Run change detection if the value changes.
    if (control.ngControl && control.ngControl.valueChanges) {
      this._valueChanges = control.ngControl.valueChanges
        .pipe(takeUntil(this._destroyed))
        .subscribe(() => this._changeDetectorRef.markForCheck());
    }
  }

  private _checkPrefixAndSuffixTypes() {
    this._hasIconPrefix = !!this._prefixChildren.find(p => !p._isText);