angularjs – 在提交后向表单字段添加自定义消息
发布时间：2020-12-17 18:09:15 所属栏目：安全 来源：网络整理
导读：我有一种形式,我不知道我将提前收到什么验证错误.所以,我的计划是：将表单提交给服务器,如果存在则返回错误,然后将错误消息添加到相关字段.我的代码是这样的： /* global angular */(function() { 'use strict'; var app = angular.module('formlyExample',[
|
我有一种形式,我不知道我将提前收到什么验证错误.所以,我的计划是：将表单提交给服务器,如果存在则返回错误,然后将错误消息添加到相关字段.我的代码是这样的：
/* 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,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包含一个类,用于向字段添加红色边框.您可以自由禁用此功能.如果您在此区域还需要任何内容??,请随意ping. 这是一个DEMO （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |