时间戳

首页 > 解决方案 > AngularJS 表单验证不起作用，显示空表单

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

问题描述

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

<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}}但什么也没显示！

那么，有什么建议可以让它工作吗？

标签： javascriptangularjsangularjs-validationangularjs-forms

解决方案

所有 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>

推荐阅读