javascript - AngularJS 表单拒绝验证提交

Question

我的 Angular 表单拒绝在提交时验证。我有多个其他类似的表格设置，完全可以正常工作。如果无效，它会阻止提交，但是，它根本不显示任何错误消息。

<div class="card card-block signup-card">
  <h1>Sign Up</h1>
  <form role="form" name="signupForm" ng-submit="signupForm.$valid && uploadPic(picFile)" novalidate>
  <div class="form-group text-center">
    <span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
    <div class="profile-image">
      <div class="profile-preview">
        <img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
        <button ng-click="picFile = null" ng-show="picFile">Remove</button>
      </div>
      <input type="file" id="file" ngf-select ng-model="picFile" name="file"
             accept="image/*" ngf-max-size="2MB" required
             ngf-model-invalid="errorFiles" style="display:none;">
      <label for="file" class="btn btn-green btn-md">Upload Picture</label>
    </div>
  </div>
  <div class="form-group">
    <label for="email">Email ending in .edu</label>
    <input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" required="">
  </div>
  <div class="form-group">
    <label for="fname">First Name</label>
    <input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required="">
    <span ng-show="signupForm.firstname.$error.required"></span>
  </div>
  <div class="form-group">
    <label for="lastname">Last Name</label>
    <input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
    <span ng-show="signupForm.lastname.$error.required"></span>
  </div>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
    <span ng-show="signupForm.username.$error.required"></span>
  </div>
  <div class="form-group">
    <label for="gradclass">Graduation Year</label>
    <input type="number" class="form-control" min="2016" max="2024" integer id="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
    <span ng-show="signupForm.user.gradClass.$error.integer">Not a valid graduation year!</span>
    <span ng-show="signupForm.user.gradClass.$error.min || signupForm.size.$error.max"></span>
  </div>
  <div class="form-group">
    <label for="school">School</label>
    <select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
      <option disabled selected="selected" value="0">Choose School</option>
      <option value="1">Champlain College</option>
      <option value="2">UVM</option>
    </select>
    <span ng-show="signupForm.school.$error.required">Please select a school</span>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
    <span ng-show="signupForm.password.$error.required"></span>
  </div>
  <div class="form-group">
    <label for="password-2">Password Again</label>
    <input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6"placeholder="Password Again" name="password2" required>
    <span ng-show="signupForm.password2.$error.required"></span>
  </div>
  <div class="login-bottom-container">
    <input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-click="submitted = true">
    <div class="right">
       <a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
    </div>
    <span class="progress" ng-show="picFile.progress >= 0">
      <div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
    </span>
    <span ng-show="picFile.result">Upload Successful</span>
    <span class="err" ng-show="errorMsg">Error making account.</span>
  </div>
</form>
</div>

非常感谢任何帮助。

编辑
这是有效的代码:

<link href="css/profile.css" rel="stylesheet">
<div class="row" style="padding-top: 1em;padding-bottom: 1em;">
  <div class="col-md-8 col col-xs-12">
    <div class="buffer">
      <div class="profile-picture" style="background-image:url({{ addRoute(currentUser.profile_picture) }}); background-size:cover;">
      </div>
      <div class="profile-container">
        <h2 class="name-highlight">Hi, {{currentUser.firstName}}&nbsp;{{currentUser.lastname}}</h3>
        <h4 class="name-highlight">{{ currentUser.school }} class of {{currentUser.grad_class}}</h4>
      </div>
    </div>
    <div class="col-md-6 col-xs-12">
      <h2>Update your profile</h2>
      <form role="form" name="profileForm"  ng-submit="profileForm.$valid && updateUser()" novalidate>
        <label for="username">Username</label>
        <input type="text" value="{{currentUser.username}}" name = "username" ng-model="currentUser.username" placeholder="Username" id="username" class="item-input-profile form-control" required="">
        <div ng-show="profileForm.$submitted || profileForm.username.$touched">
            <span ng-show="profileForm.username.$error.required" style="color: red;">Please put a username!</span>
        </div>
        <label for="email">Email</label>
        <input type="email" value="{{ currentUser.email }}" name="email" ng-model="currentUser.email" placeholder="Email" id="email" class="item-input-profile form-control" required="">
        <div ng-show="profileForm.$submitted || profileForm.email.$touched">
            <span ng-show="profileForm.email.$error.required" style="color: red;">Please put an email!</span>
        </div>
        <label for="bio">Bio</label>
        <textarea type="textarea" role="textarea" name="bio" ng-model="currentUser.bio" id="bio" class="item-input-profile form-control" placeholder="Bio"></textarea>
        <input type="submit" class="btn btn-green btn-lg" value="Update Profile">
       </form>
    </div>
    <div class="col-md-6 col-xs-12">
      <h2>Update your password</h2>
      <form role="form" name="passwordForm" ng-submit="passwordForm.$valid && updatePasswords()" novalidate>
        <label for="oldpassword">Your old password</label>
        <input type="password" placeholder="Old Password" ng-model="updatePassword.oldpassword" id="oldpassword" name="oldpassword" ng-minlength= "6" class="item-input-profile form-control" required>
        <div ng-show="passwordForm.$submitted || passwordForm.oldpassword.$touched">
            <span ng-show="passwordForm.oldpassword.$error.required" style="color: red;">Please put in your old password</span>
        </div>
        <label for="newpassword">Your new password</label>
        <input type="password" placeholder="New Password" ng-model="updatePassword.newpassword" id="newpassword" ng-minlength= "6" name="newpassword" equals="{{ currentUser.passwordagain }}"class="item-input-profile form-control" required>
        <div ng-show="passwordForm.$submitted || passwordForm.newpassword.$touched">
            <span ng-show="passwordForm.newpassword.$error.required" style="color: red;">Please put in your new password</span>
        </div>
        <label for="passwordagain">Your new password again</label>
        <input type="password" placeholder="New Password Again" ng-model="updatePassword.passwordagain" id="passwordagain" ng-minlength= "6" name="passwordagain" equals="{{ currentUser.newpassword }}" class="item-input-profile form-control" required>
        <div ng-show="passwordForm.$submitted || passwordForm.passwordagain.$touched">
            <span ng-show="passwordForm.passwordagain.$error.required" style="color: red;">Please put in your new password again</span>
        </div>
        <input type="submit" class="btn btn-green btn-lg" value="Change Password">
      </form>
    </div>
  </div>

  <div class="col-md-4 col-xs-12">
    <h2 class="gray-header text-center" ng-if="!hasPosts">No posts to show</h2>
    <div class="post-card profile-post" ng-repeat="post in currentUser.posts.posts">
      <div class="item-slider">
        <uib-carousel interval="myInterval" no-wrap="noWrapSlides">
          <uib-slide ng-repeat="image in post.images" active="slide.active" index="slide.id">
            <img ng-src="{{addRoute(image.path)}}" style="margin:auto;">
          </uib-slide>
        </uib-carousel>
      </div>
      <div class="profile-image" style="background-image:url( {{ addRoute(post.profile_picture) }} ); background-size: cover;"></div>
      <div class="post-content">
        <div class="top-info">
          <span><div class="glyphicon glyphicon-user">&nbsp;</div></span><span class="post-username">{{ post.firstname}}&nbsp;{{ post.lastname }}</span>
          <br>
          <span><div class="glyphicon glyphicon-tag">&nbsp;</div></span><span class="post-username">{{ post.category}}</span>
        </div>
        <div class="wrap">
          <h1 class="post-title">{{post.title}} - <span class="price">{{post.price}}</span></h1>
          <p class="description">
            {{post.content}}
          </p>
        </div>
        <button type="button" class="btn btn-danger btn-lg btn-block" ng-click="deletePost(post.id)">Delete Post</button>
      </div>
    </div>
  </div>
</div>

Answer 1

更新的答案

注意:Angular 验证适用于 name 属性

<!DOCTYPE html>
<html lang="en-US" ng-app="">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>

<div class="card card-block signup-card">
  <h1>Sign Up</h1>
  <form role="form" name="signupForm" novalidate>
<!-- <div class="form-group text-center">
    <span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
    <div class="profile-image">
      <div class="profile-preview">
        <img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
        <button ng-click="picFile = null" ng-show="picFile">Remove</button>
      </div>
      <input type="file" id="file" ngf-select ng-model="picFile" name="file"
             accept="image/*" ngf-max-size="2MB" required
             ngf-model-invalid="errorFiles" style="display:none;">
      <label for="file" class="btn btn-green btn-md">Upload Picture</label>
    </div>
  </div> -->
  <div class="form-group" ng-class="{ 'has-error' : signupForm.email.$invalid && !signupForm.email.$pristine }">
    <label for="email">Email ending in .edu</label>
    <input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" name="email" required>
    <div ng-show="signupForm.email.$touched">
         <span ng-show="signupForm.email.$error.required" style="color: red;">email id not proper</span>
    </div>
  </div>
  <div class="form-group" ng-class="{ 'has-error' : signupForm.firstname.$invalid && !signupForm.firstname.$pristine }">
    <label for="fname">First Name</label>
    <input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required>
    <div ng-show="signupForm.firstname.$touched">
        <span ng-show="signupForm.firstname.$error.required" style="color: red;" ng-cloak>Please enter first name</span>
    </div>
  </div>
  <div class="form-group" ng-class="{ 'has-error' : signupForm.lastname.$invalid && !signupForm.lastname.$pristine }">
    <label for="lastname">Last Name</label>
    <input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
    <div ng-show="signupForm.lastname.$touched">
            <span ng-show="signupForm.lastname.$error.required" style="color: red;">last name required</span>
    </div>
  </div>
  <div class="form-group" ng-class="{ 'has-error' : signupForm.username.$invalid && !signupForm.username.$pristine }">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
    <div ng-show="signupForm.username.$touched">
                <span ng-show="signupForm.username.$error.required" style="color: red;">username required</span>
    </div>
  </div>
 <div class="form-group">
    <label for="gradclass">Graduation Year</label>
    <input type="number" class="form-control" min="2016" max="2024" id="gradclass" name="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
    <div ng-show="signupForm.school.$touched">
            <span ng-show="signupForm.gradclass.$error.required" style="color: red;">Graduaton date required</span>
            <span ng-show="signupForm.gradclass.$error.number" style="color: red;">Not valid number!</span>
            <span ng-show="!signupForm.gradclass.$valid" style="color: red;">Graduation year between 2016 to 2024</span>
    </div>
  </div>
  <div class="form-group">
    <label for="school">School</label>
    <select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
      <option disabled selected="selected" value="0">Choose School</option>
      <option value="1">Champlain College</option>
      <option value="2">UVM</option>
    </select>
    <div ng-show="signupForm.school.$touched">
            <span ng-show="signupForm.school.$error.required" style="color: red;">please select a school</span>
    </div>
  </div>
  <div class="form-group" ng-class="{ 'has-error' : signupForm.password.$invalid && !signupForm.password.$pristine }">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
    <div ng-show="signupForm.password.$touched">
        <span ng-show="signupForm.password.$error.required" style="color: red;">password required</span>
    </div>
  </div>
  <div class="form-group" ng-class="{ 'has-error' : signupForm.password2.$invalid && !signupForm.password2.$pristine }">
    <label for="password-2">Password Again</label>
    <input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6" placeholder="Password Again" name="password2" required>
    <div ng-show="signupForm.password2.$touched">
        <span ng-show="signupForm.password2.$error.required" style="color: red;">confirmation required</span>
    </div>
  </div>
  <div class="login-bottom-container">
    <input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-disabled="signupForm.$invalid" ng-click="submitted = true">
    <!-- <button class="btn btn-green btn-lg" ng-disabled="signupForm.$invalid" ng-click="Sign up()">Sign up</button>-->
    <div class="right">
       <a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
    </div>
    <span class="progress" ng-show="picFile.progress >= 0">
      <div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
    </span>
    <span ng-show="picFile.result">Upload Successful</span>
    <span class="err" ng-show="errorMsg">Error making account.</span>
  </div>
</form>
</div>

</body>
</html>