如何将验证属性添加到md-autocomplete angular material指令

Question

我正在使用版本0.7.1的角度材料。我正在使用此处描述的自动完成功能： Autocomplete demo

但是，它似乎不支持验证逻辑，即使它生成textarea： Autocomplete directive documentation

我想我可以在querySearch函数中添加逻辑来将ng-valid切换为ng-invalid。它是否正确？如果是这种情况，那么我需要一个关于md-autocomplete的句柄，但这很难，因为name属性被删除了。

Answer 1

快速更新，获得Angular Material网站上的解决方案（最新版本1.0.0-）， https://material.angularjs.org/latest/demo/autocomplete

您会发现现在支持'required'和'ng-messages'。

int main(){
int num, arr[size], div[size], nondiv[size], d=0, nd=0;
int divsize = 0;
int nondivsize = 0;
int arrsize = 0;
do{
    printf("Enter a number within 1 and 5: ");
    scanf("%d", &num);
    if(num<1 || num>5)
        printf("\nThe number you have entered is not within the given range.\n");
} while(num<1 || num>5);

printf("\nEnter ten numbers: \n");
for(int i=0; i<10; i++){
    printf("Number %d: ", i+1);
    scanf("%d", &arr[i]);
}

printf("\nEntered numbers: ");
for(int i=0; i<10; i++){
    printf("%d ", arr[i]);
}

//calculates the arrays size of arr and displays it
for(int i; i<10; i++){
    if(arr[i]!= 0)
        arrsize++;
}
printf("\narrsize: %d\n", arrsize);

//Stores divisible and non-divisible inputs in to different arrays
for(int i=0; i<10; i++){
    if(arr[i]%num == 0){
        div[d] = arr[i];
        d++;
    }

    else{
        nondiv[nd] = arr[i];
        nd++;
    }
}

//calculates the number of elements in array div and displays it
for(int i=0; i<10; i++){
    if(div[i] != 0){
        divsize++;
    }
}

printf("Number of divisible numbers: %d ", divsize);
printf("\nDivisible numbers: ");
for(int i=0; i<divsize; i++){
    printf("%d ", div[i]);
}
}

Answer 2

Read documentation

您需要这些选项

您可以使用以下方式运行自定义验证：

更新以下模板

 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>'

并添加以下yr md-auto-complate controller

$scope.validationCheck=false;
  $scope.validate=function(data){
    $scope.validationCheck=true;
    console.log('validation : '+data);
  }
  $scope.validate2=function(data){
    console.log('validation2 :'+data);
  }

Answer 3

我使用相同的方法在角度材质中使用自动完成进行表单验证。但遗憾的是，对此指令的验证并不像输入组件那么顺利。所以我下定决心克服这个问题，并为这个组件做了一些R＆amp; D.请查看以下代码段，他们会帮助您解决此问题。

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>

SCRIPT：

(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 here

的完整示例

Answer 4

似乎我不是唯一一个发现这个棘手的人。很快就会有一个解决方案： Autocomplete validation improvements in progress