| <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;"> | |
| <button md-waves md-button click.delegate="validateModel()">validate</button> | |
| <button md-waves md-button click.delegate="reset()">reset</button> | |
| <button md-waves md-button click.delegate="setItem3()">Set to item 3</button> | |
| </div> | |
| </md-card> | |
| <md-card md-title="Show or hide error text"> | |
| <select md-select="show-errortext.bind: showErrortext; label: Don't select anything and click validate" value.two-way="selectedValue2 & 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;"> | |
| <button md-waves md-button click.delegate="validateModel2()">validate</button> | |
| <button md-waves md-button click.delegate="reset2()">reset</button> | |
| </div> | |
| <md-switch style="margin-top: 15px;" md-label-on="show" md-label-off="hide" md-checked.bind="showErrortext"></md-switch> | |
| </md-card> | |
| <md-card if.bind="controller.errors.length"> | |
| <h5 class="error-text">You have errors!</h5> | |
| <ul style="margin-top: 15px;"> | |
| <li repeat.for="error of controller.errors"> | |
| <a href="#" click.delegate="error.target.focus()"> | |
| ${error.message} | |
| </a> | |
| </li> | |
| </ul> | |
| </md-card> | |
| </template> |
| import { inject, NewInstance } from 'aurelia-framework'; | |
| import { ValidationController, ValidationRules } from 'aurelia-validation'; | |
| import { MaterializeFormValidationRenderer } from 'aurelia-materialize-bridge'; | |
| @inject(NewInstance.of(ValidationController)) | |
| export class App { | |
| selectedValue = ''; | |
| selectedValue2 = ''; | |
| showErrortext = false; | |
| controller = null; | |
| rules = ValidationRules | |
| .ensure('selectedValue') | |
| .displayName('Basic') | |
| .required() | |
| .ensure('selectedValue2') | |
| .displayName('Show or hide error text') | |
| .required() | |
| .on(this) | |
| .rules; | |
| constructor(controller: ValidationController) { | |
| this.controller = controller; | |
| this.controller.addRenderer(new MaterializeFormValidationRenderer()); | |
| } | |
| reset() { | |
| this.selectedValue = ''; | |
| this.controller.reset({ object: this, propertyName: 'selectedValue' }); | |
| } | |
| reset2() { | |
| this.selectedValue2 = ''; | |
| this.controller.reset({ object: this, propertyName: 'selectedValue2' }); | |
| } | |
| validateModel() { | |
| return this.controller.validate({ object: this, propertyName: 'selectedValue' }); | |
| } | |
| validateModel2() { | |
| return this.controller.validate({ object: this, propertyName: 'selectedValue2' }); | |
| } | |
| setItem3() { | |
| this.selectedValue = 'item3'; | |
| } | |
| } |
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.
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body aurelia-app="main"> | |
| <h1>Loading...</h1> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.20.5/config2.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
| /******************************************************************************* | |
| * The following two lines enable async/await without using babel's | |
| * "runtime" transformer. Uncomment the lines if you intend to use async/await. | |
| * | |
| * More info here: https://github.com/jdanyow/aurelia-plunker/issues/2 | |
| */ | |
| //import regeneratorRuntime from 'babel-runtime/regenerator'; | |
| //window.regeneratorRuntime = regeneratorRuntime; | |
| /******************************************************************************/ | |
| import 'materialize'; | |
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() ) | |
| .plugin('aurelia-validation'); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |