如何在控制器中捕获错误或验证 angular material datepicker？

Question

在 angular material 日期选择器中，使用 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

您已经答对了，但缺少验证。正确的方法是检查属性 $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

Answer 2

Angularjs 为 form 创建一个 scope 变量，每当它用于检查该表单的验证时。现在您可以直接使用 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

如何在控制器中捕获错误或验证 angular material datepicker？

How to catch errors or validate angular material datepicker in the controller?

datepicker

angularjs

angular-material