Question

我正在尝试创建一个包含选择和输入的表单。不幸的是，当我添加此表单时，在输入被填满时什么也没有发生，没有任何操作。下面是我的代码：

<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}} {{myForm.user.$error}} {{myForm.user.$dirty}}，但什么也没有显示！

那么，有什么建议可以使其正常工作？

Answer 1

所有AngularJS应用程序必须具有一个root元素。 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>

Answer 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>

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

2 个答案: