0
私はNG-のメッセージのカスタムディレクティブに取り組んでいます
場所の入力フィールドに1つの指令「カスタム検証」を追加して：角度1.5カスタム検証ディレクティブ
<input name="inputName" ng-model="vm.inputName" custom-validation="vm.validationConfig" class="form-control" />
と設定してオブジェクトを定義します：
vm.validationConfig = {
"rules": [
{ "ng-minlength": 2 },
{ "ng-maxlength": 20 },
{ "ng-pattern": "/^[a-zA-Z0-9]$/" },
"required"
],
"messages": [
{ "required": "This field is required" },
{ "minlength": "Message must be over 2 characters" },
{ "maxlength": "Message must not exceed 20 characters" },
{ "pattern": "Message must contain letters or numbers only" }
]
};
指示入力を追加した後、単純に次のようにラップする必要があります。
<form name="inputName-form" ng-class="{ 'has-error': inputName-form.inputName.$invalid }" novalidate>
<input name="inputName" type="number" ng-model="inputName" max="100" class="form-control" required>
<div ng-messages="inputName-form.inputName.$error" class="error-messages" role="alert" ng-if="inputName-form.inputName.$invalid ">
<div ng-message="number" class="message">Should be a number</div>
<div ng-message="max" class="message">The number is too large.</div>
<div ng-message="required" class="message">The field is required.</div>
</div>
</form>
は、これまでのところ、私のディレクティブは次のようになります。
(function() {
"use strict";
var module = angular.module('app');
function isObject(obj) {
return obj === Object(obj);
}
var validate = function() {
return {
restrict: 'A',
replace: true,
transclude: "element",
scope: {
},
link: function (scope, element, attrs) {
var input = attrs.name;
//for some reason there was a space with the name
input = input.split(' ').join('');
scope.inputName = input;
//create a unique form name
scope.formName = input + "-form";
//remove doubled form control
element.removeClass('form-control');
//get configuration
scope.config = scope.$parent.vm.validationConfig;
//object to set if form is valid or not
scope.isValid = scope.$parent.vm.formValid;
var formInputId = scope.formName + "." + scope.inputName;
scope.$watch('scope.formName.$valid', function (newVal) {
scope.isValid[formInputId] = newVal;
});
var i, obj, key, val;
scope.input = scope[attrs.name];
//parse configuration object
if (scope.config !== undefined) {
for (i = 0; i < scope.config.rules.length; i++) {
if (isObject(scope.config.rules[i])) {
obj = scope.config.rules[i];
key = Object.keys(obj)[0];
val = obj[key];
attrs.$set(key, val);
} else {
attrs.$set(scope.config.rules[i], true);
}
}
//parse messages
scope.msg = '';
for (i = 0; i < scope.config.messages.length; i++) {
obj = scope.config.messages[i];
key = Object.keys(obj)[0];
val = obj[key];
var newMessage = '<div ng-message=' + key + '>' + val + '</div>';
scope.msg = scope.msg.concat(newMessage);
}
}
},
template: '<form name="{{formName}}"><div ng-transclude></div><div ng-messages="formName[inputName].$error">{{msg}}</div></form>'
};
};
module.directive('customValidation', validate);
}());
私はきちんとformName.inputNameにアクセスする方法がわからないテンプレート
<div ng-messages="formName[inputName].$error">{{msg}}</div>
- にrealatedこのディレクティブを使用して、少なくとも2つの問題があります。 $エラー？
- {{MSG}}文字列として全てNG-のメッセージをdispalyingされ、私は前にそれをコンパイルしようとしていたが、それはうまくいきませんでした...
おかげ