var myApp = angular.module("myApp", ["aa.formExtensions", "aa.notify", "aa.select2"]);
myApp.controller("myCtrl1", ['$scope', 'aaFormExtensions', function ($scope, aaFormExtensions) {
aaFormExtensions.validationMessages = {
required: "{0} は必須です.",
email: "フィールド {0} はemail形式で入力してください.",
minlength: "{0} は最低 {1} 文字必要です.",
maxlength: "{0} は最大 {1} 文字です.",
min: "{0} は最低 {1} です.",
max: "{0} は最高 {1} です.",
pattern: "{0} は不正な形式です.",
url: "{0} はURL形式で入力してください.",
number: "{0} は数値を入力してください.",
unknown: "{0} は不正です."
};
}]);
<script src="https://rawgit.com/AngularAgility/AngularAgility/master/dist/angular-agility.js"></script>
<div ng-app="myApp">
<div aa-notify style="position: fixed; bottom: 10px; right: 10px; z-index:1000;"></div>
<div class="container" ng-controller="myCtrl1">
<div ng-form="exampleForm" class="form-horizontal">
<p>カスタマイズなし</p>
<input type="text" aa-field-group="myName" required />
<p>独自ラベル aa-label</p>
<input type="email" aa-label="めあど!" aa-field-group="mailAddress" required />
<p>テキストエリアの幅設定 aa-col</p>
<input type="url" aa-col="sm-10" aa-field-group="message" required />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button aa-submit-form="save()" class="btn btn-default">Save</button>
</div>
</div>
</div>
</div>
</div>
input.ng-dirty.ng-valid, select.ng-dirty.ng-valid {
border: 1px solid Green;
}
input.ng-dirty.ng-invalid, select.ng-dirty.ng-invalid, input.ng-invalid.aa-invalid-attempt, select.ng-invalid.aa-invalid-attempt, input.ng-invalid.aa-had-focus, select.ng-invalid.aa-had-focus, input.explicit-add-error, select.explicit-add-error {
border: 1px solid Red;
}
div.validation-icons {
margin-left: -40px;
margin-top: 5px;
}
div.validation-icons i.fa-check {
color: green;
}
div.validation-icons i.fa-exclamation-circle {
color: red;
}
div.validation-error {
color: red;
font-weight: bold;
text-align: left;
width: 300px;
}
External resources loaded into this fiddle: