yes*_*man 5 angularjs angular-formly
我有一种形式,我不知道我将提前收到什么验证错误.所以,我的计划是:将表单提交给服务器,如果存在则返回错误,然后将错误消息添加到相关字段.我的代码是这样的:
/* global angular */
(function() {
'use strict';
var app = angular.module('formlyExample', [
'formly',
'formlyBootstrap',
'ngAnimate',
'ngMessages'
]);
app.run(function(formlyConfig, formlyValidationMessages) {
formlyConfig.extras.errorExistsAndShouldBeVisibleExpression = 'fc.$touched || form.$submitted';
});
app.config(function(formlyConfigProvider) {
formlyConfigProvider.setWrapper({
name: 'validation',
types: ['input'],
templateUrl: 'error-messages.html'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = {};
vm.options = {};
vm.fields = [{
key: 'coolValue',
type: 'input',
templateOptions: {
required: false,
type: 'text',
label: 'Cool Value'
}
}, ];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
//if (vm.form.$valid) {
// vm.options.updateInitialValue();
// alert(JSON.stringify(vm.model), null, 2);
// }
}
});
})();body {
margin: 20px
}
.formly-field {
margin-bottom: 26px;
}
.error-messages {
position: relative;
}
.error-messages,
.message {
opacity: 1;
transition: .3s linear all;
}
.message {
font-size: .8em;
position: absolute;
width: 100%;
color: #a94442;
margin-top: 2px;
}
.error-messages.ng-enter.ng-enter-active,
.message.ng-enter.ng-enter-active {
opacity: 1;
top: 0;
}
.error-messages.ng-enter,
.message.ng-enter {
opacity: 0;
top: -10px;
}
.error-messages.ng-leave,
.message.ng-leave {
opacity: 1;
top: 0;
}
.error-messages.ng-leave-active,
.message.ng-leave-active {
opacity: 0;
top: -10px;
}<!DOCTYPE html>
<html>
<head>
<!-- Twitter bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- apiCheck is used by formly to validate its api -->
<script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
<!-- This is the latest version of angular (at the time this template was created) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- This is the latest version of formly core. -->
<script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
<!-- This is the latest version of formly bootstrap templates -->
<script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
<script src="https://rawgit.com/angular/bower-angular-messages/v1.4.4/angular-messages.js"></script>
<script src="https://rawgit.com/angular/bower-angular-animate/v1.4.4/angular-animate.js"></script>
<title>Angular Formly Example</title>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<form ng-submit="vm.onSubmit()" name="vm.form" novalidate>
<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form">
<button type="submit" class="btn btn-primary submit-button">Submit</button>
<button type="button" class="btn btn-default" ng-click="vm.options.resetModel()">Reset</button>
</formly-form>
</form>
</div>
<!-- Put custom templates here -->
<script type="text/ng-template" id="error-messages.html">
<formly-transclude></formly-transclude>
<div ng-messages="fc.$error" ng-if="form.$submitted || options.formControl.$touched" class="error-messages">
<div ng-message="{{ ::name }}" ng-repeat="(name, message) in ::options.validation.messages" class="message">{{ message(fc.$viewValue, fc.$modelValue, this)}}</div>
</div>
</script>
</body>
</html>还有一个JSBin页面:http://jsbin.com/nupumakata/edit？html,js,output
我正在尝试做的事:只要您点击提交按钮,就应该在Cool Value字段中添加自定义验证消息.由于我事先不知道会出现什么错误,所以我无法事先配置消息.所以这:
formlyValidationMessages.addTemplateOptionValueMessage('pattern', 'patternValidationMessage', '', '', 'Invalid Input');
不行.在我正在寻找的答案中,消息是从提交功能内部添加的,仅在按下提交按钮后显示(在按下提交按钮之前不会显示错误).我在Formly的文档中找不到如何执行此操作.有人可以帮忙吗？
所以我所做的就是为该字段提供一个自定义模板，如下所示：
formlyConfigProvider.setWrapper({
name: 'inputWrapper',
template: '<div ng-class="to.changeColor==\'red\'? \'redBorder\' : \'otherBorder\'"><formly-transclude></formly-transclude>{{to.keyVal}}</div>'
});
表单元素通过架构格式定义，以允许单独访问每个元素。
vm.schema={
"schema": {
"coolValue" : [{
"key": "coolValue",
"type": "input",
"wrapper": ['inputWrapper'],
"templateOptions": {
"type" : "text",
"label": 'Cool Value',
"keyVal":"",
"changeColor":"green"
}
}]
}
};
最后，onSubmit函数
function onSubmit() {
//Do whatever you want here
//Let's say your server returns an error "iNVALID Credentials"
var response={
"error": {
"errors": [
{
"domain": "global",
"reason": "authError",
"message": "Invalid Credentials",
"locationType": "header",
"location": "Authorization",
}
],
"code": 401,
"message": "Invalid Credentials"
}
};
vm.schema.schema.coolValue[0].templateOptions.changeColor="red";
vm.schema.schema.coolValue[0].templateOptions.keyVal=response.error.message;
}
});
您基本上可以在此处传递来自服务器的任何错误消息或响应。
CSS 包含一个向字段添加红色的类。您border可以随意禁用此功能。如果您还需要此区域的任何内容，请随意 ping。
这是一个演示
| 归档时间： |
|
| 查看次数： |
1068 次 |
| 最近记录： |