提交后向表单字段添加自定义消息

Question

我有一个正式的表格，我不知道我会提前收到什么验证错误。所以，我的计划是：将表单提交到服务器，如果存在错误则取回错误消息，然后将错误消息添加到有问题的字段中。我的代码是这样的：

/* 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 的文档中找不到如何执行此操作。有人可以帮忙吗？

Answer 1

这是我的 jsbin

注意：

我还没有与 angular 正式合作过。所以它可能不是最有效的解决方案。但它可以满足您的需求。
我已经对您的 error-template.html 和 vm.fields.templateOptions
我创建了一个新字段 vm.fields.tempalteOptions.customErrorMessage。我将此字段的值从 onSubmit().
为了保持示例简单，我正在做 vm.fields[0].templateOptions.customErrorMessage = "Custom error message from rest service";。您可以通过 vm.fields.key 获取 field 而不是通过索引获取它，即 vm.fields[0]
此外，为了保持答案简单并避免关注不必要的细节，我已为此输入标记 required:true，这在您的情况下是错误的。因此，在您的代码中，您可以使用 formly 编写自定义验证器，然后在特定字段的 rest 服务 returns 错误时使此验证器将验证设置为无效，然后显示自定义消息。 custom validator

希望以上能解决您的问题。如果您需要更多帮助，请告诉我。

Answer 2

所以我所做的就是继续为该字段提供自定义模板，如下所示：

 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 包含一个 class 加一个红色 border 到 field.You 可以自由禁用 this.Feel 如果需要什么可以自由ping在这方面也是如此。

这是一个DEMO

提交后向表单字段添加自定义消息

Add a custom message to a formly field after submit

angularjs

angular-formly