Angularjs Angular JS表单验证不起作用，即使其他表单也能正常工作

我正在做一个学校的项目。我的项目有一些表单需要验证。登录和注册表单验证工作正常，但用于上载项目的其他表单未经验证。我试图找出错误，但没有结果

请注意，该函数工作正常，只是验证得到错误

我正在使用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>

{{message}
名字
此字段是必需的
姓
此字段是必需的
电子邮件地址
无效电子邮件
我们永远不会与其他人共享您的电子邮件。
密码
密码必须至少包含6个字符

注册

这是我的物品上传表：

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

{{message}
名称
此字段是必需的
类别
---请选择---
开胃菜
主菜
甜点
饮料
面包店
此字段是必需的
形象
此字段是必需的
如何烹饪
此字段为必填字段
视频
此字段是必需的
提交

Hye，
我试图重现您的场景，并且我能够验证

上传表单

。
请看一看。

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

{{message}
名称
此字段是必需的
类别
---请选择---
开胃菜
主菜
甜点
饮料
面包店
此字段是必需的
形象
此字段是必需的
如何烹饪
此字段为必填字段
视频
此字段是必需的
提交

novalidate属性是一个布尔属性

---

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

谢谢您的帮助。我找到了解决这个问题的方法，但这很奇怪

要获得表单验证工作，我只需要更改表单名称

从

我将所有数据推入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>

此字段是必需的

---

我想在点击提交按钮后，表单将被重置，不会出现任何错误信息

请将您的代码粘贴进去？？只需删除“novalidate”即可。tryI修复了此问题，但出现了另一个问题，请查看下面的我的评论。嗯，看到了你的评论，也许你可以刷新你的页面。这样做，你将拥有新的表单，没有活动验证。

<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

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

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