title: Add a custom message to a formly field after submit
body: <p>I have a formly form of which I do not know what validation errors I will receive in advance. So, my plan: submit the form to the server, get errors back if they exist, then add the error message to the field in question. My code is this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* 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);
        // }
      }
    });
  
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;!-- Twitter bootstrap --&gt;
    &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"&gt;
  
    &lt;!-- apiCheck is used by formly to validate its api --&gt;
    &lt;script src="//npmcdn.com/api-check@latest/dist/api-check.js"&gt;&lt;/script&gt;
    &lt;!-- This is the latest version of angular (at the time this template was created) --&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"&gt;&lt;/script&gt;
  
    &lt;!-- This is the latest version of formly core. --&gt;
    &lt;script src="//npmcdn.com/angular-formly@latest/dist/formly.js"&gt;&lt;/script&gt;
    &lt;!-- This is the latest version of formly bootstrap templates --&gt;
    &lt;script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"&gt;&lt;/script&gt;
  
    &lt;script src="https://rawgit.com/angular/bower-angular-messages/v1.4.4/angular-messages.js"&gt;&lt;/script&gt;
    &lt;script src="https://rawgit.com/angular/bower-angular-animate/v1.4.4/angular-animate.js"&gt;&lt;/script&gt;
  
    &lt;title&gt;Angular Formly Example&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="formlyExample" ng-controller="MainCtrl as vm"&gt;
    &lt;div&gt;
      &lt;form ng-submit="vm.onSubmit()" name="vm.form" novalidate&gt;
        &lt;formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form"&gt;
          &lt;button type="submit" class="btn btn-primary submit-button"&gt;Submit&lt;/button&gt;
          &lt;button type="button" class="btn btn-default" ng-click="vm.options.resetModel()"&gt;Reset&lt;/button&gt;
        &lt;/formly-form&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  
    &lt;!-- Put custom templates here --&gt;
    &lt;script type="text/ng-template" id="error-messages.html"&gt;
      &lt;formly-transclude&gt;&lt;/formly-transclude&gt;
      &lt;div ng-messages="fc.$error" ng-if="form.$submitted || options.formControl.$touched" class="error-messages"&gt;
        &lt;div ng-message="{{ ::name }}" ng-repeat="(name, message) in ::options.validation.messages" class="message"&gt;{{ message(fc.$viewValue, fc.$modelValue, this)}}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And a JSBin page: <a href="http://jsbin.com/nupumakata/edit?html,js,output" rel="nofollow">http://jsbin.com/nupumakata/edit?html,js,output</a></p>
  
  <p>What I'm trying to do: as soon as you hit the submit button, a custom validation message  should be added to the Cool Value field. Since I don't know beforehand what errors will appear, I can't configure messages beforehand. So this: </p>
  
  <pre><code>formlyValidationMessages.addTemplateOptionValueMessage('pattern', 'patternValidationMessage', '', '', 'Invalid Input');
  </code></pre>
  
  <p>Would not work. In the answer I'm looking for, the message is added from inside the Submit function and only shown after the submit button is pressed (no error is shown until the submit button is pressed). I can't find in the documentation for Formly how to do this. Can anyone help please? </p>