src/dev-app/input/input-demo.html - main - githubmirror/components

src/dev-app/input/input-demo.html
979 строк31 KB
Kristiyan Kostadinov
refactor(multiple): switch button selectors
14 мар 2025, 09:04
14 мар 2025, 09:04103ac7c
<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Basic</mat-toolbar>
  <mat-card-content>
    <form>
      <mat-form-field class="demo-full-width">
        <mat-label>Company (disabled)</mat-label>
        <input matNativeControl disabled value="Google">
      </mat-form-field>

      <table style="width: 100%" cellspacing="0"><tr>
        <td>
          <mat-form-field style="width: 100%">
            <input matInput placeholder="First name">
          </mat-form-field>
        </td>
        <td>
          <mat-form-field style="width: 100%">
            <mat-label>Long last name that will be truncated</mat-label>
            <input matInput>
          </mat-form-field>
        </td>
      </tr></table>
      <p>
        <mat-form-field class="demo-full-width">
          <mat-label>Address</mat-label>
          <textarea matInput>1600 Amphitheatre Pkway</textarea>
        </mat-form-field>
        <mat-form-field class="demo-full-width">
          <mat-label>Address 2</mat-label>
          <textarea matNativeControl></textarea>
        </mat-form-field>
      </p>
      <table style="width: 100%" cellspacing="0"><tr>
        <td>
          <mat-form-field class="demo-full-width">
            <mat-label>City</mat-label>
            <input matInput value="Mountain View">
          </mat-form-field>
        </td>
        <td>
          <mat-form-field class="demo-full-width">
            <mat-label>State</mat-label>
            <input matInput maxLength="2" value="CA">
          </mat-form-field>
        </td>
        <td>
          <mat-form-field class="demo-full-width">
            <mat-label>Postal code</mat-label>
            <input matInput #postalCode maxLength="5" value="94043" pattern="[0-9]{5}">
            <mat-hint align="end">
              <mat-icon>mode_edit</mat-icon>
              <span aria-live="polite">{{postalCode.value.length}} / 5</span>
            </mat-hint>
          </mat-form-field>
        </td>
      </tr></table>
    </form>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-number-input-tooltip">
  <mat-toolbar color="primary">Number Input + Tooltip</mat-toolbar>
  <mat-card-content>
    <form>
      <mat-form-field>
        <mat-label>Pump Flow</mat-label>
        <input matNativeControl value="10" type="number"><!--  -->
        <span matSuffix matTooltip="Milliliter per Minute">ml/min</span>
      </mat-form-field>
    </form>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Error messages</mat-toolbar>
  <mat-card-content>
    <h4>Regular</h4>

    <p>
      <mat-form-field>
        <mat-label>Example</mat-label>
        <input matInput [(ngModel)]="errorMessageExample1" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Email</mat-label>
        <input matInput [formControl]="emailFormControl">
        @if (emailFormControl.hasError('required')) {
          <mat-error>This field is required</mat-error>
        }
        @if (emailFormControl.hasError('pattern')) {
          <mat-error>Please enter a valid email address</mat-error>
        }
      </mat-form-field>
    </p>

    <h4>With hint</h4>

    <mat-form-field>
      <mat-label>Example</mat-label>
      <input matInput [(ngModel)]="errorMessageExample2" required>
      <mat-error>This field is required</mat-error>
      <mat-hint>Please type something here</mat-hint>
    </mat-form-field>


    <form novalidate>
      <h4>Inside a form</h4>

      <mat-form-field>
        <mat-label>Example</mat-label>
        <input matInput name="example" [(ngModel)]="errorMessageExample3" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>

      <button color="primary" matButton="elevated">Submit</button>
    </form>

    <h4>With a custom error function</h4>
    <mat-form-field>
      <mat-label>Example</mat-label>
      <input matInput
             [(ngModel)]="errorMessageExample4"
             [errorStateMatcher]="customErrorStateMatcher"
             required>
      <mat-error>This field is required</mat-error>
    </mat-form-field>

  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Prefix + Suffix</mat-toolbar>
  <mat-card-content>
    <h4>Text</h4>
    <mat-form-field [appearance]="prefixSuffixAppearance" class="demo-text-align-end">
      <mat-label>Amount</mat-label>
      <input matInput>
      @if (showPrefix) {
        <span matTextPrefix>$</span>
      }
      <span matTextSuffix>.00</span>
    </mat-form-field>

    <h4>Text (always outline)</h4>
    <mat-form-field appearance="outline" class="demo-text-align-end">
      <mat-label>Amount</mat-label>
      <input matInput>
      <span matTextPrefix>$</span>
      <span matTextSuffix>.00</span>
    </mat-form-field>

    <h4>Icons</h4>
    <mat-form-field [appearance]="prefixSuffixAppearance">
      <mat-label>Amount</mat-label>
      <input matInput>
      @if (showPrefix) {
        <mat-icon matIconPrefix>calendar_today</mat-icon>
      }
      <mat-icon matIconSuffix>mode_edit</mat-icon>
    </mat-form-field>

    <h4>Icon buttons</h4>
    <mat-form-field [appearance]="prefixSuffixAppearance">
      <mat-label>Amount</mat-label>
      <input matInput>
      @if (showPrefix) {
        <button matIconButton matIconPrefix>
          <mat-icon>calendar_today</mat-icon>
        </button>
      }
      <button matIconButton matIconSuffix>
        <mat-icon>mode_edit</mat-icon>
      </button>
    </mat-form-field>

    <h4>Text & Icons</h4>
    <mat-form-field [appearance]="prefixSuffixAppearance">
      <mat-label>Amount</mat-label>
      <input matInput>
      <span matTextPrefix>$</span>
      <span matTextSuffix>.00</span>
      @if (showPrefix) {
        <button matIconButton matIconPrefix>
          <mat-icon>calendar_today</mat-icon>
        </button>
      }
      <button matIconButton matIconSuffix>
        <mat-icon>mode_edit</mat-icon>
      </button>
    </mat-form-field>

    <p>
      <mat-button-toggle-group [(ngModel)]="prefixSuffixAppearance">
        <mat-button-toggle value="fill">Fill</mat-button-toggle>
        <mat-button-toggle value="outline">Outline</mat-button-toggle>
      </mat-button-toggle-group>
    </p>

    <p>
      <button (click)="showPrefix = !showPrefix">Toggle prefix</button>
    </p>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Divider Colors</mat-toolbar>
  <mat-card-content>
    <h4>Input</h4>
    <mat-form-field color="primary" >
      <mat-label>Default color</mat-label>
      <input matInput value="example">
    </mat-form-field>
    <mat-form-field color="accent">
      <mat-label>Accent color</mat-label>
      <input matInput value="example">
    </mat-form-field>
    <mat-form-field color="warn">
      <mat-label>Warn color</mat-label>
      <input matInput value="example">
    </mat-form-field>

    <h4>Textarea</h4>
    <mat-form-field color="primary">
      <mat-label>Default color</mat-label>
      <textarea matInput>example</textarea>
    </mat-form-field>
    <mat-form-field color="accent">
      <mat-label>Accent color</mat-label>
      <textarea matInput>example</textarea>
    </mat-form-field>
    <mat-form-field color="warn">
      <mat-label>Warn color</mat-label>
      <textarea matInput>example</textarea>
    </mat-form-field>

    <h4>With error</h4>
    <mat-form-field color="primary" >
      <mat-label>Default color</mat-label>
      <input matInput [(ngModel)]="dividerColorExample1" required>
      <mat-error>This field is required</mat-error>
    </mat-form-field>
    <mat-form-field color="accent">
      <mat-label>Accent color</mat-label>
      <input matInput [(ngModel)]="dividerColorExample2" required>
      <mat-error>This field is required</mat-error>
    </mat-form-field>
    <mat-form-field color="warn">
      <mat-label>Warn color</mat-label>
      <input matInput [(ngModel)]="dividerColorExample3" required>
      <mat-error>This field is required</mat-error>
    </mat-form-field>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Hints</mat-toolbar>
  <mat-card-content>
    <h4>Input</h4>
    <p>
      <mat-form-field class="demo-full-width">
        <mat-label>Character count (100 max)</mat-label>
        <input matInput
               #characterCountInputHintExample
               maxLength="100"
               value="Hello world. How are you?">
        <mat-hint align="end" aria-live="polite">
          {{characterCountInputHintExample.value.length}} / 100
        </mat-hint>
      </mat-form-field>
    </p>

    <h4>Textarea</h4>
    <p>
      <mat-form-field class="demo-full-width">
        <mat-label>Character count (100 max)</mat-label>
        <textarea matInput
                  #characterCountTextareaHintExample
                  maxLength="100">Hello world. How are you?</textarea>
        <mat-hint align="end" aria-live="polite">
          {{characterCountTextareaHintExample.value.length}} / 100
        </mat-hint>
      </mat-form-field>
    </p>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">
    <span>
      Hello&nbsp;
      <mat-form-field color="accent">
        <mat-label>First name</mat-label>
        <input matInput [(ngModel)]="name" type="text">
      </mat-form-field>,
      how are you?
    </span>
  </mat-toolbar>
  <mat-card-content>
    <p>
      <mat-form-field>
        <mat-label>Disabled field</mat-label>
        <input matInput disabled value="Value">
      </mat-form-field>
      <mat-form-field>
        <mat-label>Label</mat-label>
        <input matInput disabled required>
      </mat-form-field>
      <mat-form-field>
        <mat-label>Required field</mat-label>
        <input matInput required>
      </mat-form-field>
    </p>
    <p>
      <mat-form-field style="width: 100%">
        <mat-label>100% width label</mat-label>
        <input matInput>
      </mat-form-field>
    </p>
    <p>
      <mat-form-field style="width: 100%">
        <mat-label>Character count (100 max)</mat-label>
        <input matInput #input maxLength="100">
        <mat-hint align="end" aria-live="polite">{{input.value.length}} / 100</mat-hint>
      </mat-form-field>
    </p>
    <p>
      <mat-form-field hintLabel="Hint label" style="width: 100%">
        <mat-label>Show hint label</mat-label>
        <input matInput>
      </mat-form-field>
    </p>

    <p>
      <mat-form-field>
        <input matInput>
        <mat-label>
          I <mat-icon>favorite</mat-icon><strong>bold</strong> label
        </mat-label>
        <mat-hint>
          I also <mat-icon>home</mat-icon> <em>italic</em> hint labels
        </mat-hint>
      </mat-form-field>
    </p>
    <p>
      <mat-form-field hintLabel="Hint label" style="width: 100%">
        <mat-label>Show hint label with character count</mat-label>
        <input matInput #hintLabelWithCharCount>
        <mat-hint align="end" aria-live="polite">{{hintLabelWithCharCount.value.length}}</mat-hint>
      </mat-form-field>
    </p>
    <p>
      <mat-form-field style="margin-bottom: 4em">
        <mat-label>Enter text to count</mat-label>
        <textarea matInput #longHint></textarea>
        <mat-hint>Enter
          some text to count how many characters are in it. The character count is shown on
          the right.
        </mat-hint>
        <mat-hint align="end" style="white-space: nowrap" aria-live="polite">
          Length: {{longHint.value.length}}
        </mat-hint>
      </mat-form-field>
    </p>
    <p>
      <mat-checkbox [(ngModel)]="color">Check to change the color:</mat-checkbox>
      <mat-form-field [color]="color ? 'primary' : 'accent'">
        <input matInput [placeholder]="color ? 'Primary color' : 'Accent color'">
      </mat-form-field>
    </p>
    <p>
      <mat-checkbox [(ngModel)]="requiredField"> Check to make required:</mat-checkbox>
      <mat-form-field>
        <mat-label>{{requiredField ? 'Required field' : 'Not required field'}}</mat-label>
        <input matInput [required]="requiredField">
      </mat-form-field>
    </p>
    <p>
      <mat-checkbox [(ngModel)]="hideRequiredMarker">Check to hide the required marker:</mat-checkbox>
      <mat-form-field [hideRequiredMarker]="hideRequiredMarker" style="width: 300px">
        <mat-label>
          {{hideRequiredMarker ? 'Required Without Marker' : 'Required With Marker'}}
        </mat-label>
        <input matInput required>
      </mat-form-field>
    </p>
    <p>
      <mat-button-toggle-group [(ngModel)]="floatingLabel">
        <mat-button-toggle value="auto">Auto Float</mat-button-toggle>
        <mat-button-toggle value="always">Always Float</mat-button-toggle>
      </mat-button-toggle-group>
    </p>

    <p>
      <mat-form-field [floatLabel]="floatingLabel">
        <mat-label>Label</mat-label>
        <input matInput>
      </mat-form-field>
    </p>

    <p>
      <mat-form-field [floatLabel]="floatingLabel">
        <mat-label>What is your favorite color?</mat-label>
        <input matInput type="color" value="#00ff00">
      </mat-form-field>
    </p>

    <p>
      <mat-form-field>
        <mat-label>Prefixed</mat-label>
        <input matInput value="example">
        <span matTextPrefix>Example:&nbsp;</span>
      </mat-form-field>
      <mat-form-field class="demo-text-align-end">
        <mat-label>Suffixed</mat-label>
        <input matInput value="123">
        <span matTextSuffix>.00 €</span>
      </mat-form-field>
      <br/>
      Both:
      <mat-form-field class="demo-text-align-end">
        <mat-label>Email address</mat-label>
        <input matInput #email="matInput" value="angular-core">
        <span matIconPrefix>
          <mat-icon [class.primary]="email.focused">email</mat-icon>&nbsp;
        </span>
        <span matTextSuffix [class.primary]="email.focused">&nbsp;&#64;gmail.com</span>
      </mat-form-field>
    </p>

    <p>
      Empty: <mat-form-field><input matInput></mat-form-field>
      <label>Label: <mat-form-field><input matInput></mat-form-field></label>
    </p>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Dynamic Subscript Sizing</mat-toolbar>
  <mat-card-content>
    <p>
      One validation
      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
        <mat-label>Fill appearance</mat-label>
        <input matInput [(ngModel)]="fillAppearance" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
    </p>

    <p>
      One very long validation that wraps
      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic"
          style="width: 212px">
        <mat-label>Fill appearance</mat-label>
        <input matInput [(ngModel)]="fillAppearance" required>
        <mat-error>This field is extremely, very much, absolutely positively required so do not forget it!</mat-error>
      </mat-form-field>
    </p>

    <p>
      One hint and one validation
      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
        <mat-label>Fill appearance</mat-label>
        <input matInput [(ngModel)]="fillAppearance" required>
        <mat-error>This field is required</mat-error>
        <mat-hint>Please type something here</mat-hint>
      </mat-form-field>
    </p>

    <p>
      Multiple errors
      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
        <mat-label>Fill appearance</mat-label>
        <input matInput [(ngModel)]="fillAppearance" required>
        <mat-error>AAA</mat-error>
        <mat-error>BBB</mat-error>
        <mat-error>CCC</mat-error>
      </mat-form-field>
    </p>

    <p>
      Multiple hints
      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
        <mat-label>Fill appearance</mat-label>
        <input matInput>
        <mat-hint>aaa</mat-hint>
        <mat-hint align="end">bbb</mat-hint>
      </mat-form-field>
    </p>

    <p>
      No hints or errors
      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
        <mat-label>Fill appearance</mat-label>
        <input matInput>
      </mat-form-field>
    </p>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Number Inputs</mat-toolbar>
  <mat-card-content>
    <table width="100%">
      <thead>
      <td>Table</td>
      <td colspan="3">
        <button (click)="addABunch(5)">Add 5</button>
        <button (click)="addABunch(10)">Add 10</button>
        <button (click)="addABunch(100)">Add 100</button>
        <button (click)="addABunch(1000)">Add 1000</button>
      </td>
      </thead>
      @for (item of items; track item; let i = $index) {
        <tr>
          <td>{{i+1}}</td>
          <td>
            <mat-form-field>
              <mat-label>Value</mat-label>
              <input matInput
                    type="number"
                    [(ngModel)]="items[i].value">
            </mat-form-field>
          </td>
          <td>
            <input type="number" [(ngModel)]="items[i].value">
          </td>
          <td>{{item.value}}</td>
        </tr>
      }
    </table>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Forms</mat-toolbar>
  <mat-card-content>
    <mat-form-field>
      <mat-label>Reactive</mat-label>
      <input matInput [formControl]="formControl">
    </mat-form-field>
    <mat-form-field>
      <mat-label>Template</mat-label>
      <input matInput [(ngModel)]="model" required [disabled]="ctrlDisabled">
    </mat-form-field>
    <button matButton="elevated" color="primary"
            (click)="formControl.enabled ? formControl.disable() : formControl.enable()">
      DISABLE REACTIVE CTRL
    </button>
    <button matButton="elevated" color="primary" (click)="ctrlDisabled = !ctrlDisabled">
      DISABLE TD CTRL
    </button>
    <div>
      <mat-form-field>
        <mat-label>Delayed value</mat-label>
        <input matInput [formControl]="delayedFormControl">
      </mat-form-field>
    </div>
  </mat-card-content>
</mat-card>


<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Floating labels</mat-toolbar>

  <mat-card-content>
    <div>
      <mat-form-field>
        <input matInput [formControl]="placeholderTestControl">
      </mat-form-field>

      <mat-form-field>
        <input matInput [formControl]="placeholderTestControl" placeholder="Only placeholder">
      </mat-form-field>

      <mat-form-field>
        <mat-label>Only label</mat-label>
        <input matInput [formControl]="placeholderTestControl">
      </mat-form-field>

      <mat-form-field>
        <mat-label>Label and placeholder</mat-label>
        <input matInput [formControl]="placeholderTestControl" placeholder="This is the placeholder">
      </mat-form-field>

      <mat-form-field floatLabel="always">
        <mat-label>Always float</mat-label>
        <input matInput [formControl]="placeholderTestControl" placeholder="This is the placeholder">
      </mat-form-field>

      <mat-form-field>
        <mat-label>Label w/ placeholder</mat-label>
        <input matInput [formControl]="placeholderTestControl" placeholder="Placeholder">
      </mat-form-field>
    </div>

    <button
      matButton="elevated"
      color="primary"
      (click)="togglePlaceholderTestValue()">Toggle value</button>

    <button
      matButton="elevated"
      color="primary"
      (click)="togglePlaceholderTestTouched()">Toggle touched</button>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Textarea Autosize</mat-toolbar>
  <mat-card-content>
    <h3>Regular &lt;textarea&gt;</h3>
    <textarea class="demo-textarea" cdkTextareaAutosize cdkAutosizeMaxRows="10"></textarea>

    <h3>Regular &lt;textarea&gt; with maxRows and minRows</h3>
    <div>
      <label>minRows<input type="number" #minRows class="demo-rows" (input)="1+1"></label> &nbsp;
      <label>maxRows<input type="number" #maxRows class="demo-rows" (input)="1+1"></label>
    </div>
    <textarea class="demo-textarea"
              cdkTextareaAutosize
              [cdkAutosizeMinRows]="parseNumber(minRows.value)"
              [cdkAutosizeMaxRows]="parseNumber(maxRows.value)"></textarea>
    <button type="button" (click)="minRows.value = (parseNumber(minRows.value) - 1) + ''">Decrement minRows</button>

    <h3>&lt;textarea&gt; with mat-form-field</h3>
    <div>
      <mat-form-field>
        <mat-label>Autosized textarea</mat-label>
        <textarea matInput cdkTextareaAutosize cdkAutosizeMaxRows="10"></textarea>
      </mat-form-field>
    </div>

    <h3>&lt;textarea&gt; with ngModel</h3>
    <div>
      <label>Input with same ngModel <input [(ngModel)]="textareaNgModelValue"></label>
    </div>
    <label>
      Plain textarea with auto size
      <textarea cdkTextareaAutosize [(ngModel)]="textareaNgModelValue"></textarea>
    </label>

    <h3>&lt;textarea&gt; with bindable autosize </h3>
    <mat-checkbox [(ngModel)]="textareaAutosizeEnabled" name="autosizeEnabledCheckbox">
      Autosize enabled
    </mat-checkbox>
    <textarea [cdkTextareaAutosize]="textareaAutosizeEnabled"></textarea>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Appearance</mat-toolbar>
  <mat-card-content>
    <mat-form-field appearance="fill" [color]="color">
      <mat-label>Fill appearance</mat-label>
      <input matInput [(ngModel)]="fillAppearance" required>
      <mat-error>This field is required</mat-error>
      <mat-hint>Please type something here</mat-hint>
    </mat-form-field>

    <mat-form-field appearance="outline" [color]="color">
      <mat-label>Outline appearance</mat-label>
      <input matInput [(ngModel)]="outlineAppearance" required>
      <mat-error>This field is required</mat-error>
      <mat-hint>Please type something here</mat-hint>
    </mat-form-field>

    <table style="width: 100%" cellspacing="0"><tr>
      <td>
        <mat-form-field appearance="fill" [color]="color" style="width: 100%">
          <mat-label>Fill appearance</mat-label>
          <input matInput [(ngModel)]="fillAppearance" required>
          <mat-error>This field is required</mat-error>
          <mat-hint>Please type something here</mat-hint>
        </mat-form-field>
      </td>
      <td>
        <mat-form-field appearance="outline" [color]="color" style="width: 100%">
          <mat-label>Outline appearance</mat-label>
          <input matInput [(ngModel)]="outlineAppearance" required>
          <mat-error>This field is required</mat-error>
          <mat-hint>Please type something here</mat-hint>
        </mat-form-field>
      </td>
    </tr></table>

    <mat-button-toggle-group [(ngModel)]="color">
      <mat-button-toggle value="primary">Primary</mat-button-toggle>
      <mat-button-toggle value="accent">Accent</mat-button-toggle>
      <mat-button-toggle value="warn">Warn</mat-button-toggle>
    </mat-button-toggle-group>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Autofill</mat-toolbar>
  <mat-card-content>
    <form novalidate>
      <mat-checkbox [(ngModel)]="customAutofillStyle" name="custom">
        Use custom autofill style
      </mat-checkbox>
      <mat-form-field>
        <mat-label>Autofill monitored</mat-label>
        <input matInput (cdkAutofill)="isAutofilled = $event.isAutofilled" name="autofill"
               [class.demo-custom-autofill-style]="customAutofillStyle">
      </mat-form-field>
      <button color="primary" matButton="elevated">Submit</button>
      <span> is autofilled? {{isAutofilled ? 'yes' : 'no'}}</span>
    </form>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Disabled interactive inputs</mat-toolbar>
  <mat-card-content>
    @for (appearance of appearances; track $index) {
      <div>
        <mat-form-field [appearance]="appearance">
          <mat-label>Label</mat-label>
          <input
            matNativeControl
            disabled
            disabledInteractive
            value="Value"
            matTooltip="I can trigger a tooltip!">
        </mat-form-field>

        <mat-form-field [appearance]="appearance">
          <mat-label>Label</mat-label>
          <input
            matNativeControl
            disabled
            disabledInteractive
            matTooltip="I can trigger a tooltip!">
        </mat-form-field>

        <mat-form-field [appearance]="appearance">
          <mat-label>Label</mat-label>
          <input
            matNativeControl
            disabled
            disabledInteractive
            placeholder="Placeholder"
            matTooltip="I can trigger a tooltip!">
        </mat-form-field>

        <mat-form-field [appearance]="appearance">
          <input
            matNativeControl
            disabled
            disabledInteractive
            matTooltip="I can trigger a tooltip!"
            placeholder="Placeholder">
        </mat-form-field>
      </div>
    }
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Textarea form-fields</mat-toolbar>
  <mat-card-content>
    <mat-form-field appearance="fill" class="demo-horizontal-spacing">
      <mat-label>Label</mat-label>
      <textarea matInput [disabled]="disableTextarea"></textarea>
    </mat-form-field>
    <mat-form-field appearance="outline" class="demo-horizontal-spacing">
      <mat-label>Label</mat-label>
      <textarea matInput [disabled]="disableTextarea"></textarea>
    </mat-form-field>
    <p>
      <mat-checkbox [(ngModel)]="disableTextarea">Disable textarea form-fields</mat-checkbox>
    </p>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Appearance toggle</mat-toolbar>
  <mat-card-content>
    <mat-form-field [appearance]="appearance" class="demo-horizontal-spacing">
      <mat-label>Label</mat-label>
      <input matInput value="Initial">
    </mat-form-field>
    <p>
      <mat-button-toggle-group [(ngModel)]="appearance">
        <mat-button-toggle value="fill">Fill</mat-button-toggle>
        <mat-button-toggle value="outline">Outline</mat-button-toggle>
      </mat-button-toggle-group>
    </p>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Autocomplete</mat-toolbar>
  <mat-card-content>
    <p>
      <mat-form-field>
        <mat-label>Pick Number</mat-label>
        <input type="text" aria-label="Number" matInput
               [matAutocomplete]="autoComplete1">
        <mat-autocomplete #autoComplete1="matAutocomplete">
          @for (option of options; track option) {
            <mat-option [value]="option">{{option}}</mat-option>
          }
        </mat-autocomplete>
      </mat-form-field>
    </p>

    <p>
      <mat-form-field appearance="outline">
        <mat-label>Pick Number</mat-label>
        <input type="text" aria-label="Number" matInput
               [matAutocomplete]="autoComplete2">
        <mat-autocomplete #autoComplete2="matAutocomplete">
          @for (option of options; track option) {
            <mat-option [value]="option">{{option}}</mat-option>
          }
        </mat-autocomplete>
      </mat-form-field>
    </p>
  </mat-card-content>
</mat-card>


<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Outline form field in a tab</mat-toolbar>
  <mat-card-content>
    <mat-tab-group>
      <mat-tab label="Tab 1">
        <mat-form-field appearance="outline">
          <mat-label>Tab 1 input</mat-label>
          <input matInput value="test">
        </mat-form-field>

        <mat-form-field appearance="outline" class="demo-text-align-end">
          <mat-label>Amount</mat-label>
          <input matInput>
          <span matTextPrefix>$&nbsp;</span>
          <span matTextSuffix>.00</span>
        </mat-form-field>
      </mat-tab>
      <mat-tab label="Tab 2">
        <mat-form-field appearance="outline">
          <mat-label>Tab 2 input</mat-label>
          <input matInput value="test">
        </mat-form-field>

        <mat-form-field appearance="outline" class="demo-text-align-end">
          <mat-label>Amount</mat-label>
          <input matInput>
          <span matTextPrefix>$&nbsp;</span>
          @if (showSecondPrefix) {
            <span matTextPrefix>!&nbsp;</span>
          }
          <span matTextSuffix>.00</span>
        </mat-form-field>
      </mat-tab>
    </mat-tab-group>

    <button (click)="showSecondPrefix = !showSecondPrefix">Toggle second prefix.</button>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Baseline</mat-toolbar>
  <mat-card-content>
    <span style="display: inline-block; margin-top: 20px">Shifted text</span>
    <mat-form-field>
      <mat-label>Label</mat-label>
      <input matInput>
    </mat-form-field>

    <p>
      Textarea alignment
    </p>

    <mat-form-field appearance="outline">
      <mat-label>Textarea</mat-label>
      <textarea matInput rows="1"></textarea>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Input</mat-label>
      <input matInput>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Input</mat-label>
      <input matInput>
    </mat-form-field>
  </mat-card-content>
</mat-card>


<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Examples</mat-toolbar>
  <mat-card-content>
    <h4>Custom control</h4>
    <form-field-custom-control-example></form-field-custom-control-example>
    <p>
      <mat-form-field appearance="outline">
        <mat-label>Phone number</mat-label>
        <example-tel-input required></example-tel-input>
        <mat-icon matIconSuffix>phone</mat-icon>
        <mat-hint>Include area code</mat-hint>
      </mat-form-field>
    </p>
    <p>
      <mat-form-field>
        <mat-label>Label</mat-label>
        <select matNativeControl>
          <option>First</option>
          <option>Second</option>
        </select>
      </mat-form-field>
    </p>
    <p>
      <mat-form-field appearance="outline">
        <mat-label>Label</mat-label>
        <select matNativeControl>
          <option>First</option>
          <option>Second</option>
        </select>
      </mat-form-field>
    </p>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Without label</mat-toolbar>
  <mat-card-content>
    <h4>Label removed</h4>
    <p>
    <mat-form-field appearance="outline">
      @if (hasLabel$ | async){
        <mat-label>My input</mat-label>
      }
      <input matInput type="text" />
    </mat-form-field>
    </p>
    <p>
    <mat-form-field>
      @if (hasLabel$ | async){
        <mat-label>My input</mat-label>
      }
      <input matInput type="text" />
    </mat-form-field>
    </p>
    <h4>No defined label</h4>
    <p>
    <mat-form-field appearance="outline">
      <input matInput type="text"/>
    </mat-form-field>
    </p>
    <p>
      <mat-form-field>
        <input matInput type="text"/>
      </mat-form-field>
    </p>
  </mat-card-content>
</mat-card>


<mat-card class="demo-card demo-basic">
  <mat-card-content>
    <button (click)="showHidden = !showHidden">Show/hide hidden form-field</button>
    <button (click)="hiddenLabel = hiddenLabel + '!!'">Add !!</button>
    <button (click)="hiddenAppearance = hiddenAppearance === 'fill' ? 'outline' : 'fill'">
      Toggle appearance
    </button>
    <p [style.display]="showHidden ? 'block' : 'none'">
      <mat-form-field [appearance]="hiddenAppearance">
        <mat-label>{{hiddenLabel}}</mat-label>
        <input matInput value="value">
      </mat-form-field>
    </p>
  </mat-card-content>
</mat-card>