Question

在角度材料datepicker中，使用ng-Messages显示错误消息，但如何捕获控制器中的错误消息并验证是否存在错误。

<form name="myForm">


      <md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date"
          required md-min-date="minDate" md-max-date="maxDate"  md-open-on-focus></md-datepicker>

      <div class="validation-messages" ng-messages="myForm.dateField.$error">

        <div ng-message="required">This date is required!</div>
        <div ng-message="mindate">Date is too early!</div>
        <div ng-message="maxdate">Date is too late!</div>
        <div ng-message="valid">The entered value is not a date!</div>

      </div>

      {{myForm.dateField.$error}}
    </form>
<button ng-click="check(myForm.dateField.$error)">Click</button>

我想验证控制器中点击按钮时的错误

$scope.check=function(errors){


  };

Answer 1

当Angularjs用于检查该表单的验证时，会为scope创建一个form变量。现在，您可以直接在form.$valid中直接使用formName.$invalid，html和更多预定义属性。但是如果你想在控制器中使用它，只需使用md-button将其传递给控制器（同时提交表单）。

<form name="myForm">
  <md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date" required="" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker>

  <div class="validation-messages" ng-messages="myForm.dateField.$error">
    <div ng-message="valid">The entered value is not a date!</div>
    <div ng-message="required">This date is required!</div>
    <div ng-message="mindate">Date is too early!</div>
    <div ng-message="maxdate">Date is too late!</div>
    <div ng-message="filtered">Only weekends are allowed!</div>
  </div>
  <md-button ng-click="check(myForm)">check/md-button>
</form>

这是一个工作示例。您可以在控制台中根据需要由控制器打印整个对象。 http://codepen.io/next1/pen/rLebeK

Answer 2

你已经做对了，但错过了验证。正确的方法是检查属性$scope.myForm.$valid，表单有效时为true，否则为false。查看Developer Guide。

其他方法是检查空对象（因此没有错误）但只检查该输入：

HTML中的

<button ng-click="check(myForm.myName.$error)">Click</button>

控制器中的

$scope.check = function (val){

 // check if is empty
 var ok = !!(Object.keys(val).length === 0 && val.constructor === Object);

}

除非您想自己动手或处理特定错误，否则我不推荐这种方法。

See this Plunker with both ways

如何在控制器中捕获错误或验证角度材料datepicker？

2 个答案: