AngularJS 表单验证不起作用，显示空表单答案

【问题标题】：AngularJS form validation is not working, empty form displayedAngularJS 表单验证不起作用，显示空表单
【发布时间】：2019-06-11 06:27:25
【问题描述】：

我正在尝试创建一个包含选择和输入的表单。不幸的是，当我添加此表单时，填写输入时没有任何反应，没有任何动作......下面是我的代码：

<form name="myForm" novalidate>
   <p>Username:
      <br>
      <input type="text" name="user" ng-model="user" required>
         <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
           <span ng-show="myForm.user.$error.required">Username is required.</span>
         </span>
   </p>
   <p>
      <input type="submit" ng-disabled="(myForm.user.$dirty && myForm.user.$invalid) ||  (myForm.email.$dirty && myForm.email.$invalid)">
      </p>
      {{(myForm)}}
      {{myForm}}
      {{myForm.user.$error}}
      {{myForm.user.$dirty}}           
  </form>

当我意识到什么都没有发生时，我决定将我的表单属性显示为纯文本 {{(myForm)}} {{myForm}} {{myForm.user.$error}} {{myForm.user.$dirty}} 但什么也没显示！

那么，有什么建议可以让它发挥作用吗？

【问题讨论】：

标签： javascript angularjs angularjs-validation angularjs-forms

【解决方案1】：

所有 AngularJS 应用程序都必须有一个根元素。 ng-app 指令告诉 AngularJS 哪个是应用程序的根元素。见https://www.w3schools.com/angular/ng_ng-app.asp。当我将ng-app 添加到您的 HTML 中时，我可以使您的代码正常工作。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="">
  <form name="myForm" novalidate>
    <p>Username:
      <br>
      <input type="text" name="user" ng-model="user" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
           <span ng-show="myForm.user.$error.required">Username is required.</span>
      </span>
    </p>
    <p>
      <input type="submit" ng-disabled="(myForm.user.$dirty && myForm.user.$invalid) ||  (myForm.email.$dirty && myForm.email.$invalid)">
    </p>
    {{(myForm)}} {{myForm}} {{myForm.user.$error}} {{myForm.user.$dirty}}
  </form>
</body>

【讨论】：

感谢您的回复，我已经定义了控制器和模块，问题是我已经定义了另一个表单，并且在其中实现了验证表单；这造成了一些冲突。您的代码帮助我发现了这个问题。

【解决方案2】：

这样试试：

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
</form>
<script>
    var app = angular.module("DemoApp",[]);

    app.controller("DemoController",function($scope) {

        $scope.Display = function () {
            $scope.user='Angular';
        }
    });
</script>
</body>
</html>

【讨论】：