如何在提交按钮上显示错误消息？答案

【问题标题】：how to show error message on submit button?如何在提交按钮上显示错误消息？
【发布时间】：2014-08-15 07:58:08
【问题描述】：

您能告诉我如何在单击提交按钮时显示错误消息吗？运行程序后我收到一条错误消息（当我写 required :true 时）。当用户提交表单时，我需要显示一条错误消息。我正在使用这个插件https://github.com/McNull/angular-febworms

我们可以获取选择字段的 onchange 事件吗？

在我的示例中，当我运行应用程序时会显示一个红色边框。我不想要这个。当用户点击“提交”按钮时我需要这个

http://plnkr.co/edit/JOI82JrEBcKJMrzLgtZd?p=preview

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
  <link rel="stylesheet" href="https://rawgithub.com/McNull/angular-febworms/master/package/febworms.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.0/angular.js" data-semver="1.2.0"></script>
  <script src="http://code.angularjs.org/1.2.0/angular-route.js"></script>
  <script type="text/javascript" src="https://rawgithub.com/McNull/angular-febworms/master/package/febworms.min.js"></script>
  <script type="text/javascript" src="dummy-schema.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MyFormController as frmCtrl">

  <div class="container">
    <div class="row-fluid">

      <form class="form-horizontal" name="form.state" novalidate>



        <div febworms-form 
             febworms-schema="form.schema" 
             febworms-form-data="form.data">
        </div>




        <div class="form-actions">
          <a class="btn btn-primary" ng-disabled="form.state.$invalid" ng-click="frmCtrl.save()">Save changes</a>
        </div>



      </form>

    </div>
  </div>
</body>

</html>

但需要模糊事件来验证或 onchange 事件？

【问题讨论】：

错误信息应该直接由点击触发，还是在服务器返回错误响应后（我觉得更现实）？
on button click..换句话说。就像我的第一个字段是必需的。当我运行应用程序时，当我单击按钮（提交按钮）运行应用程序后它不应该显示红色它显示错误字段是必需的。这可能吗。或者第二个示例有电子邮件类型字段，它显示按下提交按钮时电子邮件无效
@ValentinWaeselynck 任何想法..？
问题是，我知道如何手动进行，但我不知道febworms。您是否为您的字段声明了一些 name 属性？
我也知道静态形式。但我不知道如何以动态形式进行验证。不使用任何属性只是研究文档如何使用插件将 json 转换为表单。在那篇文档中没有写如何验证表单

标签： javascript jquery angularjs webforms angularjs-directive

【解决方案1】：

由于您的表单名称是 'form.state' 并且您的字段名称是 'required'（顺便说一下，这有点令人困惑，您可能需要更改它），您可以使用以下表达式获取有关验证状态的有用信息在您的表单范围内：

form.state.required.$error // yields something like { "required": true, "pattern": false }
form.state.required.$valid // yields a boolean
form.state.$error
form.state.$valid

我还没有听说过知道表单是否已经提交的方法。我最好的办法是在控制器中为此添加一些状态：

$scope.errorShown = false;
$scope.showErrorMessage = function(){
  $scope.errorShown = true;
};

在你的 HTML 中：

    <div class="form-actions">
      <a class="btn btn-primary" ng-disabled="form.state.$invalid" ng-click="(form.state.$valid ? frmCtrl.save() : showErrorMessage())">Save changes</a>
    </div>

    <div ng-if="errorShown && form.state.$invalid">
      Your form is not valid.
    </div>

Plunkr here.

【讨论】：