Как поймать ошибки или проверить угловой материал datepicker в контроллере?

Question

В ящике с угловым материалом сообщения об ошибках отображаются с помощью ng-сообщений, но как я могу их поймать в контроллере и проверить, нет ли ошибки.

<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 varialbe для form всякий раз, когда он используется для проверки проверки этой формы. Теперь вы можете напрямую использовать form.$valid, formName.$invlaid и еще много предопределенных свойств в 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