使用AngularJs验证表单

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

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

我的印象是，我所需要的只是使用ng sumbit来实现这一点。我的控制器中是否需要包含一些内容。我正在使用angular 1.3.2，但我也尝试使用1.3.8

更新：

我的表格很长，但这里有一个完整的短版表格。我使用它与引导相结合

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

---

表单正常工作的最低要求是设置了name属性的元素，表单中的输入必须指定ng模型元素

设置了这些要求后，表单将作为与指定的名称属性同名的范围字段提供

---

如果您具备以上所有功能，请发布其余代码，我们将尝试了解发生了什么。

请发布包含标签的完整源代码。刚刚更新的帖子将包含完整的源代码。谢谢，我有所有这些要求。我在更新中发布了完整的代码。谢谢