1
我有一个表单,其中第一个名字和姓氏在彼此之后。带验证消息的表单设计
现在都有自己的验证ng消息。但是,当例如发生错误时姓氏和名字没有错误。形式变得非常丑陋。
我该如何做到这一点,当两个之一有一个错误,都往上走。
https://plnkr.co/edit/B4qrUgxhntkvwuIPGIBs?p=preview
<div class="smallContainer myForm">
<form name="userForm" ng-name="userForm" ng-submit="signup(userForm.$valid, userForm)" novalidate>
<!-- First name -->
<div id="firstName" class="form-group"
ng-class="{ 'has-error' : userForm.first_name.$touched && userForm.first_name.$invalid,
'has-success' : userForm.first_name.$valid }">
<div class="col-10">
<input class="form-control" type="text" placeholder="First name"
name="first_name"
ng-model="user.first_name"
ng-minlength="2"
ng-maxlength="25"
required>
<div class="help-block" ng-messages="userForm.first_name.$error" ng-if="userForm.first_name.$touched">
<p ng-message="minlength">Your name is too short.</p>
<p ng-message="maxlength">Your name is too long.</p>
<p ng-message="required">Your name is required.</p>
</div>
</div>
</div>
<!-- Last name -->
<div id="lastName" class="form-group"
ng-class="{ 'has-error' : userForm.last_name.$touched && userForm.last_name.$invalid,
'has-success' : userForm.last_name.$valid }">
<div class="col-12">
<input class="form-control" type="text" placeholder="Last name"
name="last_name"
ng-model="user.last_name"
ng-minlength="2"
ng-maxlength="25"
required>
<div class="help-block" ng-messages="userForm.last_name.$error" ng-if="userForm.last_name.$touched">
<p ng-message="minlength">Your name is too short.</p>
<p ng-message="maxlength">Your name is too long.</p>
<p ng-message="required">Your name is required.</p>
</div>
</div>
</div>
<!-- Email-->
<div class="form-group"
ng-class="{ 'has-error' : userForm.email.$touched && userForm.email.$invalid,
'has-success' : userForm.email.$valid }">
<div class="col-10">
<input class="form-control" type="email" placeholder="Email"
name="email"
ng-model="user.email"
ng-minlength="2"
ng-maxlength="50"
ng-pattern="emailFormat"
required>
<div class="help-block" ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
<p ng-message="maxlength">Your email is too long.</p>
<p ng-message="required">Your email is required.</p>
<p ng-message="pattern">This is not a valid email.</p>
<p ng-message="validationError">This email is already taken.</p>
</div>
</div>
</div>
<!-- Password1-->
<div class="form-group"
ng-class="{ 'has-error' : userForm.password.$touched && userForm.password.$invalid,
'has-success' : userForm.password.$valid }">
<div class="col-10">
<input class="form-control" type="password" placeholder="Password"
name="password"
ng-model="user.password"
ng-minlength="8"
ng-maxlength="30"
required>
<div class="help-block" ng-messages="userForm.password.$error" ng-if="userForm.password.$touched">
<p ng-message="minlength">Your password is too short.</p>
<p ng-message="maxlength">Your password is too long.</p>
<p ng-message="required">Your password is required.</p>
</div>
</div>
</div>
<!-- Password2-->
<div class="form-group"
ng-class="{ 'has-error' : userForm.password2.$touched && userForm.password2.$invalid,
'has-success' : userForm.password2.$valid }">
<div class="col-10">
<input class="form-control" type="password" placeholder="Confirm your password"
name="password2"
ng-model="user.password2"
ng-minlength="8"
ng-maxlength="30"
data-password-verify="user.password"
required>
<div class="help-block" ng-messages="userForm.password2.$error" ng-if="userForm.password2.$touched">
<p ng-message="passwordVerify ">Passwords do not match.</p>
</div>
</div>
</div>
<div>
<p class="cover-3">Are you ready to find your</p> <p class="cover-1 cover-3">peers?</p>
<button id="startButton" type="submit" class="btn btn-primary btn-lg center-block" >Start now</button>
</div>
</form>
</div>
尝试使用class =“row”并命令它们像你想要的一样 –