Angular JS 表单验证无法正常工作，即使其他表单也可以正常工作答案

【问题标题】：Angular JS form validation not working even the other forms work okAngular JS 表单验证无法正常工作，即使其他表单也可以正常工作
【发布时间】：2017-08-31 05:42:20
【问题描述】：

我正在做一个学校项目。我的项目有一些需要验证的表格。登录和注册表单验证运行良好，但用于上传项目的其他表单未验证。我试图找出错误但没有得到任何结果。

请注意，该功能可以正常工作，只是验证出错

我正在使用 AngularJS 1.4.5 和 Google Firebase

这是我的注册 HTML 代码：

<form name="registerform" ng-submit="register()" novalidate>
      <div class="form-group">
        <p ng-show="message">{{message}}</p>
        <label>First name</label>
        <input type="text" name="firstname" class="form-control" placeholder="First name" ng-model="user.firstname" ng-required="true">
        <p class="text-danger" ng-show="registerform.firstname.$invalid && registerform.firstname.$touched">This field is required</p>
      </div>
      <div class="form-group">
        <label>Last name</label>
        <input type="text" name="lastname" class="form-control" placeholder="Last name" ng-model="user.lastname" ng-required="true">
        <p class="text-danger" ng-show="registerform.lastname.$invalid && registerform.lastname.$touched">This field is required</p>
      </div>
      <div class="form-group">
        <label>Email address</label>
        <input type="email" name="email" class="form-control" placeholder="Enter email" ng-model="user.email" ng-required="true">
        <p class="text-danger" ng-show="registerform.email.$invalid && registerform.email.$touched">Invalid email</p>
        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" name="password" class="form-control" placeholder="Password" ng-model="user.password" ng-minlength="6" ng-required="true">
        <p class="text-danger" ng-show="registerform.password.$invalid && registerform.password.$touched">Password must have at least 6 characters</p>
      </div>
      <button type="submit" class="btn btn-success btn-block" ng-disabled="registerform.$invalid">Register</button><br>
      <a href="#/login" class="btn btn-primary btn-block">Already have an account? Login</a>
    </form>

这是我的项目上传表单：

<p ng-show="message">{{message}}</p>
  <form name="uploadItem" ng-submit="uploadItem()" novalidate>
    <div class="form-group">
      <label>Name</label>
      <input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.name.$invalid && uploadItem.name.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Category</label>
      <select class="form-control" name="category" ng-model="foodcategory" ng-required="true">
        <option value="">---Please select---</option>
        <option value="appetizer">Appetizer</option>
        <option value="maincourse">Main Course</option>
        <option value="dessert">Dessert</option>
        <option value="drinks">Drinks</option>
        <option value="bakery">Bakery</option>
      </select>
      <p class="text-danger" ng-show="uploadItem.category.$invalid && uploadItem.category.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Image</label>
      <input type="text" name="image" class="form-control" placeholder="Food image" ng-model="foodimage" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.image.$invalid && uploadItem.image.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>How to cook</label>
      <textarea class="form-control" rows="3" name="howtocook" placeholder="How to cook" ng-model="foodhowtocook" ng-required="true"></textarea>
      <p class="text-danger" ng-show="uploadItem.howtocook.$invalid && uploadItem.howtocook.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Video</label>
      <input type="text" name="video" class="form-control" placeholder="Youtube embed link" ng-model="foodvideo" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.video.$invalid && uploadItem.video.$touched">This field is required</p>
    </div>
    <button type="submit" class="btn btn-primary btn-block" ng-disabled="uploadItem.$invalid">Submit</button><br>
  </form>

【问题讨论】：

您能否将您的代码粘贴到jsfiddle.net。 ??
只删除“novalidate”而不是尝试

标签： angularjs forms validation angularjs-validation

【解决方案1】：

novalidate 属性是一个布尔属性。

如果存在，它指定提交时不应验证表单数据（输入）

【讨论】：

【解决方案2】：

嘿，
我试图重现您的场景，并且能够验证upload form。
请看一看。

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
  <p ng-show="message">{{message}}</p>
  <form name="uploadItem" ng-submit="uploadItem()" novalidate>
    <div class="form-group">
      <label>Name</label>
      <input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.name.$invalid && uploadItem.name.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Category</label>
      <select class="form-control" name="category" ng-model="foodcategory" ng-required="true">
        <option value="">---Please select---</option>
        <option value="appetizer">Appetizer</option>
        <option value="maincourse">Main Course</option>
        <option value="dessert">Dessert</option>
        <option value="drinks">Drinks</option>
        <option value="bakery">Bakery</option>
      </select>
      <p class="text-danger" ng-show="uploadItem.category.$invalid && uploadItem.category.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Image</label>
      <input type="text" name="image" class="form-control" placeholder="Food image" ng-model="foodimage" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.image.$invalid && uploadItem.image.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>How to cook</label>
      <textarea class="form-control" rows="3" name="howtocook" placeholder="How to cook" ng-model="foodhowtocook" ng-required="true"></textarea>
      <p class="text-danger" ng-show="uploadItem.howtocook.$invalid && uploadItem.howtocook.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Video</label>
      <input type="text" name="video" class="form-control" placeholder="Youtube embed link" ng-model="foodvideo" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.video.$invalid && uploadItem.video.$touched">This field is required</p>
    </div>
    <button type="submit" class="btn btn-primary btn-block" ng-disabled="uploadItem.$invalid">Submit</button><br>
  </form>
</div>

【讨论】：

我解决了这个问题，但又出现了一个问题，请查看我的评论。
嗯，看到你的评论，也许你可以刷新你的页面。通过这样做，你将获得没有有效验证的新表单。

【解决方案3】：

感谢您尝试帮助我。我想出了解决这个问题的方法，但这很奇怪。

要完成表单验证工作，我只需要更改表单名称

来自

<form name="uploadItem" ng-submit="uploadItem()" novalidate>

到

<form name="uploadForm" ng-submit="uploadItem()" novalidate>

并在其他输入标签中更正以下内容，例如：

<div class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
            <p class="text-danger" ng-show="uploadForm.name.$invalid && uploadForm.name.$touched">This field is required</p>
          </div>

但是，它现在出现了其他错误。

这是我的角码：

$scope.uploadItem = function(){
        recipesInfo.$add({
          name: $scope.foodname,
          category: $scope.foodcategory,
          image: $scope.foodimage,
          howtocook:$scope.foodhowtocook,
          video:$scope.foodvideo,
          date: firebase.database.ServerValue.TIMESTAMP
        }).then(function(){
          $scope.foodname = '';
          $scope.foodimage = '';
          $scope.foodcategory = '';
          $scope.foodhowtocook = '';
          $scope.foodvideo = '';
          $scope.message = 'Success!';
        });//promise
      }//uploadItem

我将所有数据推送到 Firebase，然后使用

将输入字段重置为空白

.then(function(){
          $scope.foodname = '';
          $scope.foodimage = '';
          $scope.foodcategory = '';
          $scope.foodhowtocook = '';
          $scope.foodvideo = '';
          $scope.message = 'Success!';
        });//promise

但是在点击提交按钮后，虽然数据被推送到 Firebase 并且输入字段重置为空白，但这个显示出来了

<p class="text-danger" ng-show="uploadForm.name.$invalid && uploadForm.name.$touched">This field is required</p>

我希望在点击提交按钮后，表单将被重置而没有任何错误消息

【讨论】：