Geek Answers Handbook

Add a custom message to the form field after submitting

I have a formal form, which I do not know about, which verification errors I will receive in advance. So, my plan: send the form to the server, get errors if they exist, then add the error message in the appropriate field. My code is:

/* 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>

And the JSBin page: http://jsbin.com/nupumakata/edit?html,js,output

What I'm trying to do: as soon as you click the submit button, a special verification message should be added to the Cool Value field. Since I do not know in advance what errors will appear, I cannot pre-configure the messages. So:

 formlyValidationMessages.addTemplateOptionValueMessage('pattern', 'patternValidationMessage', '', '', 'Invalid Input');

Did not work out. In the answer I'm looking for, the message is added from the "Send" function and is displayed only after pressing the send button (until the send button is pressed). I can not find in the documentation about how to do this. Can anyone help?

+5
source share
2 answers

So what I did, I went ahead and gave the field a custom template as follows:

  formlyConfigProvider.setWrapper({ name: 'inputWrapper', template: '<div ng-class="to.changeColor==\'red\'? \'redBorder\' : \'otherBorder\'"><formly-transclude></formly-transclude>{{to.keyVal}}</div>' });

Form elements are defined through a layout format, allowing each element to be individually addressed.

 vm.schema={ "schema": { "coolValue" : [{ "key": "coolValue", "type": "input", "wrapper": ['inputWrapper'], "templateOptions": { "type" : "text", "label": 'Cool Value', "keyVal":"", "changeColor":"green" } }] } };

Finally, the onSubmit function

 function onSubmit() { //Do whatever you want here //Let 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; } });

You can send any error message or response from the server here.

CSS contains a class that adds a red border to a field. You can disable this. Feel free to ping if you need anything in this area.

Here is a demo

+1
source

here is my jsbin

NOTE :

  • I did not work with angular -formly. Thus, this may not be the most effective solution. But he does what you seek.
  • I made changes to error-template.html and vm.fields.templateOptions
  • I created a new field vm.fields.tempalteOptions.customErrorMessage . And I am changing the value of this field from onSubmit() .
  • for a simple example, I do vm.fields[0].templateOptions.customErrorMessage = "Custom error message from rest service"; . You can get field on vm.fields.key , and not get it by index ie vm.fields[0]
  • In addition, to keep the answer simple and to avoid attention from unnecessary details, I noted required:true for this input, this was not true in your case. Thus, in your code you can write a special validator using formally, and then when the rest service returns an error for a certain field, make this validator set to check as invalid, and then display the user message. for custom validator

The hope above solves your problem. Let me know if you need more help.

0
source

More articles:


All Articles