form-field.html

<ng-template #labelTemplate>
  <!--
    MDC recommends that the text-field is a `<label>` element. This rather complicates the
    setup because it would require every form-field control to explicitly set `aria-labelledby`.
    This is because the `<label>` itself contains more than the actual label (e.g. prefix, suffix
    or other projected content), and screen readers could potentially read out undesired content.
    Excluding elements from being printed out requires them to be marked with `aria-hidden`, or
    the form control is set to a scoped element for the label (using `aria-labelledby`). Both of
    these options seem to complicate the setup because we know exactly what content is rendered
    as part of the label, and we don't want to spend resources on walking through projected content
    to set `aria-hidden`. Nor do we want to set `aria-labelledby` on every form control if we could
    simply link the label to the control using the label `for` attribute.
  -->
  @if (_hasFloatingLabel()) {
    <label
      matFormFieldFloatingLabel
      [floating]="_shouldLabelFloat()"
      [monitorResize]="_hasOutline()"
      [id]="_labelId"
      [attr.for]="_control.disableAutomaticLabeling ? null : _control.id"
    >
      <ng-content select="mat-label"></ng-content>
      <!--
        We set the required marker as a separate element, in order to make it easier to target if
        apps want to override it and to be able to set `aria-hidden` so that screen readers don't
        pick it up.
       -->
      @if (!hideRequiredMarker && _control.required) {
        <span
          aria-hidden="true"
          class="mat-mdc-form-field-required-marker mdc-floating-label--required"
        ></span>
      }
    </label>
  }
</ng-template>

<div
  class="mat-mdc-text-field-wrapper mdc-text-field"
  #textField
  [class.mdc-text-field--filled]="!_hasOutline()"
  [class.mdc-text-field--outlined]="_hasOutline()"
  [class.mdc-text-field--no-label]="!_hasFloatingLabel()"
  [class.mdc-text-field--disabled]="_control.disabled"
  [class.mdc-text-field--invalid]="_control.errorState"
  (click)="_control.onContainerClick($event)"
>
  @if (!_hasOutline() && !_control.disabled) {
    <div class="mat-mdc-form-field-focus-overlay" aria-hidden="true"></div>
  }
  <div class="mat-mdc-form-field-flex">
    @if (_hasOutline()) {
      <div matFormFieldNotchedOutline [matFormFieldNotchedOutlineOpen]="_shouldLabelFloat()">
        @if (!_forceDisplayInfixLabel()) {
          <ng-template [ngTemplateOutlet]="labelTemplate"></ng-template>
        }
      </div>
    }

    @if (_hasIconPrefix) {
      <div class="mat-mdc-form-field-icon-prefix" #iconPrefixContainer>
        <ng-content select="[matPrefix], [matIconPrefix]"></ng-content>
      </div>
    }

    @if (_hasTextPrefix) {
      <div class="mat-mdc-form-field-text-prefix" #textPrefixContainer>
        <ng-content select="[matTextPrefix]"></ng-content>
      </div>
    }

    <div class="mat-mdc-form-field-infix">
      @if (!_hasOutline() || _forceDisplayInfixLabel()) {
        <ng-template [ngTemplateOutlet]="labelTemplate"></ng-template>
      }

      <ng-content></ng-content>
    </div>

    @if (_hasTextSuffix) {
      <div class="mat-mdc-form-field-text-suffix" #textSuffixContainer>
        <ng-content select="[matTextSuffix]"></ng-content>
      </div>
    }

    @if (_hasIconSuffix) {
      <div class="mat-mdc-form-field-icon-suffix" #iconSuffixContainer>
        <ng-content select="[matSuffix], [matIconSuffix]"></ng-content>
      </div>
    }
  </div>

  @if (!_hasOutline()) {
    <div matFormFieldLineRipple></div>
  }
</div>

<div aria-atomic="true" aria-live="polite"
  class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
  [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
>
  @let subscriptMessageType = _getSubscriptMessageType();

  @switch (subscriptMessageType) {
    @case ('error') {
      <div class="mat-mdc-form-field-error-wrapper">
        <ng-content select="mat-error, [matError]"></ng-content>
      </div>
    }

    @case ('hint') {
      <div class="mat-mdc-form-field-hint-wrapper">
        @if (hintLabel) {
          <mat-hint [id]="_hintLabelId">{{hintLabel}}</mat-hint>
        }
        <ng-content select="mat-hint:not([align='end'])"></ng-content>
        <div class="mat-mdc-form-field-hint-spacer" aria-hidden="true"></div>
        <ng-content select="mat-hint[align='end']"></ng-content>
      </div>
    }
  }
</div>