angularjs - 如何将 Material Design Lite 和 Angular 用于表单

Question

*免责声明：这个问题不是关于在角度应用程序中使用材料设计，而是在表单中使用材料设计精简版。所以，请不要回答我宁愿使用 angular material、materialize、lumx、material bootstrap 或 daemonite ......我知道，它们存在。*

使用 Angular，一个典型的名称表单字段是：

<form name="myForm">
  <label>
  Enter your name:
    <input type="text"
        name="myName"
        ng-model="name"
        ng-minlength="5"
        ng-maxlength="20"
        required />
  </label>
  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

使用 Material Design Lite，它会是这样的：

<form action="#">
  <div class="mdl-textfield mdl-js-textfield">
     <input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*" />
     <label class="mdl-textfield__label" for="user">User name</label>
     <span class="mdl-textfield__error">Letters and spaces only</span>
  </div>
</form>

问题：如何将角度验证功能与 ngMessage（用于多个错误消息）结合使用 Material Design Lite？

Answer 1

您可以编写自己的角度模块来验证 MDL 输入字段，这是一个工作示例：http ://codepen.io/alisterlf/pen/ZGgJQB

JS

  // create angular app
var validationApp = angular.module('validationApp', ['fieldMatch']);
//Field Match directive
angular.module('fieldMatch', [])
        .directive('fieldMatch', ["$parse", function($parse) {
                return {
                        require: 'ngModel',
                        link: function(scope, elem, attrs, ctrl) {
                                var me = $parse(attrs.ngModel);
                                var matchTo = $parse(attrs.fieldMatch);
                                scope.$watchGroup([me, matchTo], function(newValues, oldValues) {
                                        ctrl.$setValidity('fieldmatch', me(scope) === matchTo(scope));
                                }, true);
                        }
                }
        }]);
//Run material design lite
validationApp.run(function($rootScope, $timeout) {
        $rootScope.$on('$viewContentLoaded', function(event) {
                $timeout(function() {
                        componentHandler.upgradeAllRegistered();
                }, 0);
        });
        $rootScope.render = {
                header: true,
                aside: true
        }
});
// create angular controller
validationApp.controller('mainController', function($scope) {
        $scope.formStatus = '';
        // function to submit the form after all validation has occurred            
        $scope.submit = function() {
                // check to make sure the form is completely valid
                if ($scope.form.$invalid) {
                        angular.forEach($scope.form.$error, function(field) {
                                angular.forEach(field, function(errorField) {
                                        errorField.$setTouched();
                                })
                        });
                        $scope.formStatus = "Form is invalid.";
                        console.log("Form is invalid.");
                } else {
                        $scope.formStatus = "Form is valid.";
                        console.log("Form is valid.");
                        console.log($scope.data);
                }
        };
});