對(duì)此的另一種做法是使一個(gè)輸入的模型與另一個(gè)輸入的值匹配。
app.directive('nxEqual', function() {
? ? return {
? ? ? ? require: 'ngModel',
? ? ? ? link: function (scope, elem, attrs, model) {
? ? ? ? ? ? if (!attrs.nxEqual) {
? ? ? ? ? ? ? ? console.error('nxEqual expects a model as an argument!');
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? scope.$watch(attrs.nxEqual, function (value) {
? ? ? ? ? ? ? ? model.$setValidity('nxEqual', value === model.$viewValue);
? ? ? ? ? ? });
? ? ? ? ? ? model.$parsers.push(function (value) {
? ? ? ? ? ? ? ? var isValid = value === scope.$eval(attrs.nxEqual);
? ? ? ? ? ? ? ? model.$setValidity('nxEqual', isValid);
? ? ? ? ? ? ? ? return isValid ? value : undefined;
? ? ? ? ? ? });
? ? ? ? }
? ? };
});
因此，如果密碼盒的型號(hào)為，login.password則在驗(yàn)證盒上設(shè)置以下屬性：nx-equal="login.password"，并測(cè)試formName.elemName.$error.nxEqual。像這樣：
<form name="form">
? ? <input type="password" ng-model="login.password">
? ? <input type="password" ng-model="login.verify" nx-equal="login.password" name="verify">
? ? <span ng-show="form.verify.$error.nxEqual">Must be equal!</span>
</form>
擴(kuò)大的視野：
對(duì)于我的一個(gè)新項(xiàng)目，我必須修改上述指令，以使其僅nxEqual在驗(yàn)證輸入具有值時(shí)才顯示錯(cuò)誤。否則nxEqual錯(cuò)誤應(yīng)被忽略。這是擴(kuò)展版本：
app.directive('nxEqualEx', function() {
? ? return {
? ? ? ? require: 'ngModel',
? ? ? ? link: function (scope, elem, attrs, model) {
? ? ? ? ? ? if (!attrs.nxEqualEx) {
? ? ? ? ? ? ? ? console.error('nxEqualEx expects a model as an argument!');
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? scope.$watch(attrs.nxEqualEx, function (value) {
? ? ? ? ? ? ? ? // Only compare values if the second ctrl has a value.
? ? ? ? ? ? ? ? if (model.$viewValue !== undefined && model.$viewValue !== '') {
? ? ? ? ? ? ? ? ? ? model.$setValidity('nxEqualEx', value === model.$viewValue);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? model.$parsers.push(function (value) {
? ? ? ? ? ? ? ? // Mute the nxEqual error if the second ctrl is empty.
? ? ? ? ? ? ? ? if (value === undefined || value === '') {
? ? ? ? ? ? ? ? ? ? model.$setValidity('nxEqualEx', true);
? ? ? ? ? ? ? ? ? ? return value;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var isValid = value === scope.$eval(attrs.nxEqualEx);
? ? ? ? ? ? ? ? model.$setValidity('nxEqualEx', isValid);
? ? ? ? ? ? ? ? return isValid ? value : undefined;
? ? ? ? ? ? });
? ? ? ? }
? ? };
});
您將像這樣使用它：
<form name="form">
? ? <input type="password" ng-model="login.password">
? ? <input type="password" ng-model="login.verify" nx-equal-ex="login.password" name="verify">
? ? <span ng-show="form.verify.$error.nxEqualEx">Must be equal!</span>
</form>
