如何在提交按钮上显示错误消息?

时间:2014-08-15 07:58:09

标签: javascript jquery angularjs webforms angularjs-directive

您能否告诉我如何在提交按钮单击时显示错误消息?。我在运行程序后收到错误消息(当我写需要时: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>

但需要模糊事件以验证或更改事件吗?

1 个答案:

答案 0 :(得分:0)

由于您的表单名称为'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