个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 21:36:15 26 4
gpt4 key购买 nike

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

/* 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');

行不通。在我正在寻找的答案中，该消息是从 Submit 函数内部添加的，并且仅在按下提交按钮后显示(在按下提交按钮之前不会显示错误)。我在 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。

这是一个 DEMO

关于angularjs - 提交后向表单字段添加自定义消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36913368/

26 4 0
文章推荐： ember.js - 回滚对 Ember 数据模型的所有更改的最佳方法
文章推荐： Cordova 相机将照片作为 Blob 对象
文章推荐： python - 使用 python 的类型库指定不止一种可能的类型
文章推荐： SQL 为空值和汇总重命名 NULL
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com