Question

我正在尝试使用AngularJS通过以下代码来验证表单：

HTML

<body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl as ctrl">
      <form name="ctrl.mForm" novalidate>
        <input type="text" name="Name" required />
        <div ng-show="ctrl.mForm.Name.$invalid">Required</div>
        <input type="submit" ng-click="send()" />
      </form>
    </div>
  </body>

JS

import angular from 'angular';

angular.module('plunker', []).controller('MainCtrl', function($scope) {
  var vm = this;

  vm.send = function () {
    alert('ok');
  }
});

Plunker

当输入为空（用户单击“提交”按钮就足够了）时，我需要显示一个div，但是什么也没发生。

此代码有什么问题，当输入为空时无法显示<div>？

Answer 1

您的控制者代码应具有Name变量：

angular.module('plunker', []).controller('MainCtrl', function($scope) {
  var vm = this;

  vm.Name = "";
  vm.send = function () {
    alert('ok');
  }
});

，您的输入控件应在ng-model中使用该变量

 <input type="text" name="Name" ng-model="Name" required />

Answer 2

Here i have updated the plunker

您应使用ng-model进行角度验证。我已经更新了。并且如果您想使用html必填字段的默认验证，则应使用ng-submit在表单元素上直接进行提交

Answer 3

您必须将表单名称更改为“ mForm”。在要显示的div上，您必须检查名称字段是否无效以及表单是否已提交。

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl as ctrl">
      <form name="mForm" novalidate>
        <input type="text" ng-model="name" name="name" required />
        <div ng-show="mForm.name.$invalid && mForm.$submitted"">Required</div>
        <input type="submit" ng-click="send()" />
      </form>
    </div>
  </body>
</html>

查看此Plunker

无法使form.name。$无效和form.name。$ error.required工作

3 个答案: