Thanood

<template>
  <md-card md-title="Basic">
    <select md-select="label: Don't select anything and click validate" value.two-way="selectedValue & validate:rules">
      <option value="" disabled selected>select an item</option>
      <option value="item1">item 1</option>
      <option value="item2">item 2</option>
      <option value="item3">item 3</option>
      <option value="item4">item 4</option>
    </select>
    <div style="margin-top: 15px;">

Thanood

What's happening?

When dynamically changing the underlying array of a select element, Materialize doesn't update the select wrapper. For this to work, the select needs a refresh.

Since Materialize doesn't provide a native refresh functionality, this is done by destroying and recreating the select wrapper.

This is useful for example when using asynchronous operations (like getting data from web services) so you can initialize the select on view load but populate it when data arrives.

Thanood

<template>
  <div>
    <select md-select="enable-option-observer: true;" value.two-way="selectedMeal">
      <option model.bind="null">Select your meal</option>
      <option repeat.for="meal of food" model.bind="meal">${meal.name} - ${meal.count}</option>
    </select>

    <a md-button="flat: true;" md-waves click.trigger="setSelectedMeal()" class="accent-text">select steak</a>
    <a md-button="flat: true;" md-waves click.trigger="increasePizzaCount()" class="accent-text">increase pizza count</a>
    You selected: ${selectedMeal | stringify}

Thanood

<template>
  <div>
    <select multiple md-select value.two-way="selectedValues">
      <option value="" disabled selected>select an item</option>
      <option value="item1">item 1</option>
      <option value="item2">item 2</option>
      <option value="item3">item 3</option>
      <option value="item4">item 4</option>
    </select>

Thanood

<template>
  <md-card md-title="Basic use">
    <select md-select="label: select a value" value.two-way="selectedValue">
      <option value="" disabled selected>select an item</option>
      <option value="item1">item 1</option>
      <option value="item2">item 2</option>
      <option value="item3">item 3</option>
      <option value="item4">item 4</option>
    </select>

Thanood

<template>
  <div>
    <md-input md-placeholder="placeholder text" md-label="put some text here" md-value.bind="textValue"></md-input><br />
    You entered: ${textValue}<br />
    <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setText()">set text to something</button>
  </div>
  <hr style="margin: 15px 0;" />
  <div>
    <h6>Text area placeholder</h6>
    <md-input md-label="put some text here" md-value.bind="textAreaValue" md-placeholder="placeholder" md-text-area="true" md-disabled.bind="disabledValue"></md-input><br />

Thanood

<template>
  <div>
    <md-input md-label="put some text here" md-value.bind="textValue">
      <i md-prefix class="material-icons">account_circle</i>
    </md-input><br />
    You entered: ${textValue}<br />
    <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setText()">set text to something</button>
  </div>
</template>

Thanood

<template>
  <div>
    <md-input md-label="put some text here" md-value.bind="textValue" md-char-counter="length: 120;"></md-input><br />
    You entered: ${textValue}<br />
    <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setText()">set text to something</button>
    
    <br><br>
    <md-input md-label="put some text here" md-value.bind="textAreaValue" md-text-area="true" md-char-counter="length: 200;"></md-input><br />
    You entered: ${textAreaValue}<br />
    <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setTextArea()">set text area to something else</button>

Thanood

md-colors

Currently, the styles for validation messages are hosted in another component Please use <md-colors></md-colors> in your main view to use colors.

This will be refactored.

Thanood

<template>
  <div>
    <md-input md-type="email" md-label="email text field" md-validate="true" md-validate-error="invalid email" md-value.bind="email"></md-input>
  </div>
</template>