我正在尝试使用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>
答案 0 :(得分:0)
表单正常工作的最低要求是<form>
元素设置了name
属性,<form>
中的输入要在其上指定ng-model
个元素
设置这些要求后,表单将作为范围字段提供,其名称与您指定的name
属性相同。
如果您拥有以上所有内容,请发布其余代码,我们会尝试解决发生的问题。