私はAngular Materialのバージョン0.7.1を使用しています。ここで説明されているように、オートコンプリートを使用しています: オートコンプリート デモ
ただし、テキストエリアを生成するにもかかわらず、検証ロジックをサポートしていないようです: Autocomplete ディレクティブのドキュメント
querySearch 関数にロジックを追加して、ng-valid を ng-invalid に切り替えることができると思います。これは正しいです？この場合、md-autocomplete のハンドルが必要ですが、name 属性が削除されるため、これは困難です。
クイック アップデート、Angular Material サイト (最新リリース 1.0.0-)、 https://material.angularjs.org/latest/demo/autocompleteでソリューションを取得しました。
「required」と「ng-messages」が現在サポートされていることがわかります。
<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
<md-content class="md-padding">
<form ng-submit="$event.preventDefault()" name="searchForm">
<p>The following example demonstrates floating labels being used as a normal form element.</p>
<div layout-gt-sm="row">
<md-input-container flex>
<label>Name</label>
<input type="text"/>
</md-input-container>
<md-autocomplete flex required
md-input-name="autocompleteField"
md-input-minlength="2"
md-input-maxlength="18"
md-no-cache="ctrl.noCache"
md-selected-item="ctrl.selectedItem"
md-search-text="ctrl.searchText"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.display"
md-floating-label="Favorite state">
<md-item-template>
<span md-highlight-text="ctrl.searchText">{{item.display}}</span>
</md-item-template>
<div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
<div ng-message="required">You <b>must</b> have a favorite state.</div>
<div ng-message="minlength">Your entry is not long enough.</div>
<div ng-message="maxlength">Your entry is too long.</div>
</div>
</md-autocomplete>
</div>
</form>
角度のあるマテリアルでオートコンプリートを使用してフォーム検証と同じアプローチで作業していましたが、残念ながら、このディレクティブの検証は入力コンポーネントほどスムーズではありません。そこで私はこの問題を克服しようと決心し、このコンポーネントの研究開発を行いました。以下のコード スニペットを見つけてください。これが役に立ちます。
HTML:
<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp">
<md-content class="md-padding">
<form ng-submit="$event.preventDefault()" name="registerForm" novalidate>
<p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
<md-autocomplete md-input-name="Country" ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0" placeholder="What is your favorite US state?" ng-class="{'validate': registerForm.Country.$touched && !vm.country1}">
<md-item-template>
<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item}}</span>
</md-item-template>
<md-not-found>
No states matching "{{ctrl.searchText}}" were found.
<a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
</md-not-found>
</md-autocomplete>
<div class="ng-message" ng-messages="registerForm.Country.$error" ng-show="registerForm.Country.$touched" role="alert">
<div class="validate" ng-show="registerForm.Country.$touched && ctrl.country1 == ''" ng-class="{'slide': registerForm.Country.$touched && ctrl.country1 == ''}">
<span>Country field is required</span>
</div>
<div class="validate" ng-show="ctrl.country1 == null" ng-class="{'slide': ctrl.country1 == null}">
<span>Please enter valid Country</span>
</div>
</div>
<br>
<md-button class="medium-button success-button" aria-label="submit" ng-disabled="registerForm.$invalid || registerForm.$pristine || !ctrl.country1" ng-click="ctrl.registerUser()">
Submit
</md-button>
</form>
</md-content>
</div>
脚本：
(function () {
'use strict';
angular
.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('DemoCtrl', DemoCtrl);
function DemoCtrl ($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
// list of `state` value/display objects
self.states = loadAll();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.newState = newState;
function newState(state) {
alert("Sorry! You'll need to create a Constituion for " + state + " first!");
}
function querySearch (query) {
var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function searchTextChange(text) {
//$log.info('Text changed to ' + text);
if(text)
self.country1 = text.match(/^[a-zA-Z0-9\_\- ]*$/);
else
self.country1 = '';
if (text)
self.country = text;
$log.info('Item changed to ' + self.country1);
}
function selectedItemChange(item) {
if(item)
self.country1 = item.match(/^[a-zA-Z0-9\_\- ]*$/);
else
self.country1 = '';
if (item)
self.country = item;
$log.info('Item changed to ' + self.country1);
}
/**
* Build `states` list of key/value pairs
*/
function loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
return allStates.split(/, +/g).map( function (state) {
return state;
});
}
/**
* Create filter function for a query string
*/
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
}
})();
ここで codepen の完全な例を参照してください
これらのオプションが必要です
上記を以下のように使用して、yr カスタム検証を実行できます。
年次テンプレートを次のように更新します
template:'<span ng-show="validationCheck">yr msg here</span><md-autocomplete\
md-no-cache="noCache"\
md-selected-item="selectedItem"\
md-search-text="searchText"\
md-items="item in querySearch(searchText)"\
md-item-text="item.display"\
placeholder="search query"\
md-selected-item-change="validate2(searchText)"\
md-search-text-change="validate(searchText)">\
<span md-highlight-text="searchText">{{item.display}}</span>\
</md-autocomplete>'
次の年に md-auto-complate コントローラを追加します
$scope.validationCheck=false;
$scope.validate=function(data){
$scope.validationCheck=true;
console.log('validation : '+data);
}
$scope.validate2=function(data){
console.log('validation2 :'+data);
}
これが難しいと思うのは私だけではないようです。これはすぐに解決される予定です: 進行中のオートコンプリート検証の改善