角控制表格

Question

所以我有這個表單片段：

<form name="registerForm" novalidate role="form">
    <div class="row">
        <div class="small-3 columns"><label for="pwd" class="right inline">Password:</label></div>
        <div class="small-9 columns">
            <label class="" ng-class="{'error': registerForm.pwd.$error.required && registerForm.pwd.$dirty}"><input type="password" id="pwd" name="pwd" ng-model="registerDetails.password" ng-required="true" /></label>
            <small class="error" ng-show="registerForm.pwd.$error.required && registerForm.pwd.$dirty">Password Required</small>
        </div>
    </div>
</form>

如您所見，這里有一個registerForm.pwd ，它是表單名稱加上輸入名稱。 Angular在此變量中添加了諸如$error和$dirty 。

有什么辦法可以添加我自己的？ 就像通過指令的registerForm.pwd.$notEqual一樣？

Answer 1

是的，請參閱下面的workink演示。

 var app = angular.module('app', []); app.directive('validPasswordC', function() { return { require: 'ngModel', scope: { reference: '=validPasswordC' }, link: function(scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function(viewValue, $scope) { if (viewValue === "") { ctrl.$setValidity('_required', false) } else { ctrl.$setValidity('_required', true) } var noMatch = viewValue != scope.reference ctrl.$setValidity('notEqual', !noMatch) }); scope.$watch("reference", function(value) {; ctrl.$setValidity('notEqual', value === ctrl.$viewValue); }); } } }); app.controller('homeCtrl', function($scope) { }); 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <div class="container" ng-app="app"> <form name="registerForm" novalidate role="form"> <div class="row"> <div class="small-3 columns"> <label for="pwd" class="right inline">Password:</label> </div> <div class="small-9 columns"> <label class="" ng-class="{'error': registerForm.pwd.$error.required && registerForm.pwd.$dirty}"> <input type="password" id="pwd" name="pwd" ng-model="registerDetails.password" placeholder=" password" ng-required="true" /> </label> <label for="pwd" class="right inline">Confirm Password:</label> <input type="password" id="password_c" name="pwdConfirm" ng-model="registerDetails.passwordConfirm" placeholder="confirm password" valid-password-c="registerDetails.password" ng-required="true" /> <p class="error" ng-show="registerForm.pwd.$error.required && registerForm.pwd.$dirty"> Password Required </p> <p ng-show="registerForm.pwdConfirm.$error.notEqual" class="error"> Passwords do not match. </p> <p class="error" ng-show="registerForm.pwdConfirm.$error.required && registerForm.pwdConfirm.$dirty || registerForm.pwdConfirm.$error._required "> Confirmation Required </p> </div> </div> </form> </div>