使用AngularJs验证表单

时间:2015-01-11 19:11:42

标签: angularjs forms

我正在尝试使用AngularJs验证表单。我是Angular的新手,我无法弄清楚如何让提交的值发挥作用。

<div ng-show="signup_form.$submitted || signup_form.firstname.$touched">
    ....
</div>

我的印象是,我所需要的只是使用ng-sumbit来实现这一点。我需要在控制器中包含一些东西吗?我正在使用angular 1.3.2但我也尝试使用1.3.8

更新:

我的表单很长,但这是表单的完整缩写版本。我正在将它与bootstrap结合使用。

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

  <div class="col-xs-12 col-sm-5">
    <!-- First Name -->
    <div class="form-group" ng-class="{'has-success has-feedback' : (signup_form.$submitted || signup_form.firstname.$touched) && signup_form.firstname.$valid, 'has-error has-feedback' : (signup_form.$submitted || signup_form.firstname.$touched) && signup_form.firstname.$invalid}">
      <label class="control-label" for="firstname">First Name:</label>
      <input
        type="text"
        class="form-control"
        name="firstname"
        placeholder="First Name"
        ng-model="firstname"
        required>
      <span ng-show="(signup_form.$submitted || signup_form.firstname.$touched) && signup_form.firstname.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
      <span ng-show="(signup_form.$submitted || signup_form.firstname.$touched) && signup_form.firstname.$invalid" class="glyphicon glyphicon-remove form-control-feedback"></span>
      <span ng-show="signup_form.$submitted || signup_form.firstname.$touched">
        <p class="help-block" ng-show="signup_form.firstname.$invalid">Please enter your first name</p>
      </span>
    </div>
    <!-- Last Name -->
    <div class="form-group" ng-class="{'has-success has-feedback' : (signup_form.$submitted || signup_form.lastname.$touched) && signup_form.lastname.$valid, 'has-error has-feedback' : (signup_form.$submitted || signup_form.lastname.$touched) && signup_form.lastname.$invalid}">
      <label class="control-label" for="lastName">Last Name:</label>
      <input
        type="text"
        class="form-control"
        name="lastname"
        placeholder="Last Name"
        ng-model="lastname"
        required>
      <span ng-show="(signup_form.$submitted || signup_form.lastname.$touched) && signup_form.lastname.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
      <span ng-show="(signup_form.$submitted || signup_form.lastname.$touched) && signup_form.lastname.$invalid" class="glyphicon glyphicon-remove form-control-feedback"></span>
      <span ng-show="signup_form.$submitted || signup_form.lastname.$touched">
        <p class="help-block" ng-show="signup_form.lastname.$invalid">Please enter your last name</p>
      </span>
    </div>
    <!-- Phone -->
    <div class="form-group" ng-class="{'has-success has-feedback' : (signup_form.$submitted || signup_form.phone.$touched) && signup_form.phone.$valid, 'has-error has-feedback' : (signup_form.$submitted || signup_form.phone.$touched) && signup_form.phone.$invalid}">
      <label class="control-label" for="phone">Phone:</label>       
      <input
        type="tel"
        class="form-control"
        name="phone"
        placeholder="Phone"
        ng-model="phone"
        ng-minlength="10"
        ng-pattern="/^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/"
        required>
      <span ng-show="(signup_form.$submitted || signup_form.phone.$touched) && signup_form.phone.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
      <span ng-show="(signup_form.$submitted || signup_form.phone.$touched) && signup_form.phone.$invalid" class="glyphicon glyphicon-remove form-control-feedback"></span>
      <span ng-show="signup_form.$submitted || signup_form.lastname.$touched">
        <p class="help-block" ng-show="signup_form.phone.$invalid && !signup_form.phone.$error.required">Your phone number appears to be invalid</p>
        <p class="help-block" ng-show="signup_form.phone.$error.required">Please enter your phone number</p>
      </span>
    </div>
    <!-- Email -->
    <div class="form-group" ng-class="{'has-success has-feedback' : (signup_form.$submitted || signup_form.email.$touched) && signup_form.email.$valid, 'has-error has-feedback' : (signup_form.$submitted || signup_form.email.$touched) && signup_form.email.$invalid}">
      <label class="control-label" for="email">Email:</label>
      <input
        type="email"
        class="form-control"
        name="email"
        placeholder="Email"
        ng-model="email"
        required>
      <span ng-show="(signup_form.$submitted || signup_form.email.$touched) && signup_form.email.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
      <span ng-show="(signup_form.$submitted || signup_form.email.$touched) && signup_form.email.$invalid" class="glyphicon glyphicon-remove form-control-feedback"></span>
      <span ng-show="signup_form.$submitted || signup_form.lastname.$touched">
        <p class="help-block" ng-show="signup_form.email.$invalid && !signup_form.email.$error.required">Your email appears to be invalid</p>
        <p class="help-block" ng-show="signup_form.email.$error.required">Please enter your email</p>
      </span>
    </div>
    <!-- Gender -->
    <div class="form-group" ng-class="{'has-success' : (signup_form.$submitted || signup_form['field[4]'].$touched) && signup_form['field[4]'].$valid, 'has-error' : (signup_form.$submitted || signup_form['field[4]'].$touched) && signup_form['field[4]'].$invalid}">
      <label class="control-label" for="field[4]">Gender:</label>
      <select
        class="form-control"
        name="field[4]"
        ng-model="gender"
        required>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
      <span ng-show="signup_form.$submitted || signup_form.lastname.$touched">
        <p class="help-block" ng-show="signup_form['field[4]'].$invalid">Please select your gender</p>
      </span>
    </div>
    <!-- Goal Weight -->
    <div class="form-group" ng-class="{'has-success has-feedback' : (signup_form.$submitted || signup_form['field[6]'].$touched) && signup_form['field[6]'].$valid, 'has-error has-feedback' : (signup_form.$submitted || signup_form['field[6]'].$touched) && signup_form['field[6]'].$invalid}">
      <label class="control-label" for="field[6]">Goal Weight:</label>     
      <input
        type="number"
        class="form-control"
        name="field[6]"
        placeholder="Goal Weight"
        ng-model="goalweight"
        required>
      <span ng-show="signup_form.$submitted || signup_form.lastname.$touched">
        <p class="help-block" ng-show="signup_form['field[6]'].$error.required">Please enter your goal weight</p>
        <p class="help-block" ng-show="signup_form['field[6]'].$invalid && !signup_form['field[6]'].$error.required">Please enter a number</p>
      </span>
    </div>
    <!-- Why you joined -->
    <div class="form-group" ng-class="{'has-success' : (signup_form.$submitted || signup_form['field[9]'].$touched) && signup_form['field[9]'].$valid, 'has-error' : (signup_form.$submitted || signup_form['field[9]'].$touched) && signup_form['field[9]'].$invalid}">
      <label class="control-label" for="field[9]">Why Did you join:</label>               
      <select
        class="form-control"
        name="field[9]"
        ng-model="whyjoined"
        required>
        <option value="Gain Weight">Gain Weight</option>
        <option value="Lose Weight">Lose Weight</option>
      </select>
      <span ng-show="signup_form.$submitted || signup_form.lastname.$touched">
        <p class="help-block" ng-show="signup_form['field[9]'].$invalid">Please tell us if you want to lose or gain weight</p>
      </span>
    </div>
    <!-- Workout Preference -->
    <div class="form-group" ng-class="{'has-success' : (signup_form.$submitted || signup_form['field[10]'].$touched) && signup_form['field[10]'].$valid, 'has-error' : (signup_form.$submitted || signup_form['field[10]'].$touched) && signup_form['field[10]'].$invalid}">
      <label class="control-label" for="field[10]">Workout Preference:</label>
        <select
          class="form-control"
          name="field[10]"
          ng-model="workoutpreference"
          required>
          <option value="gym">I want to workout at the gym</option>
          <option value="home">I like to workout at home</option>
          <option value="both">Both at the gym and at home</option>
        </select>
      <span ng-show="signup_form.$submitted || signup_form.lastname.$touched">
        <p class="help-block" ng-show="signup_form['field[10]'].$invalid">Please tell us where you would like to workout</p>
      </span>
    </div>            

    <!-- Submit Button -->
    <div class="form-group">
      <button type="submit" class="btn btn-default">Submit Questionnaire</button>
      <p ng-show="signup_form.$invalid">Complete the questionnaire</p>
    </div>

  </div>
</form>

1 个答案:

答案 0 :(得分:0)

表单正常工作的最低要求是<form>元素设置了name属性,<form>中的输入要在其上指定ng-model个元素

设置这些要求后,表单将作为范围字段提供,其名称与您指定的name属性相同。

如果您拥有以上所有内容,请发布其余代码,我们会尝试解决发生的问题。