在我的一项任务中,我必须执行一些表单验证。除了“星号”标签与单选按钮不对齐之外,其他一切都很好。我正在为您提供代码。
https://jsfiddle.net/m8nwnc8a/29/
<form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{ 'has-error':
commentForm.author.$error.required &&
!commentForm.author.$pristine }">
<label for="author" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="author"
name="author" placeholder="Enter Name"
ng-model="userComment.author" required>
<span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="commentForm.author.$error.required &&
!commentForm.author.$pristine" class="help-block">
Your name is required.
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Number of stars</label>
<div class="radio col-sm-9">
<label class="radio-inline control-label">
<input type='radio' name="rating" value="1" ng-model="userComment.rating">1
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="2" ng-model="userComment.rating">2
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="3" ng-model="userComment.rating">3
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="4" ng-model="userComment.rating">4
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="5" ng-model="userComment.rating" checked>5
</label>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error':
commentForm.comment.$error.required &&
!commentForm.comment.$pristine }">
<label for="comment" class="col-sm-2 control-label">Comment</label>
<div class="col-sm-10">
<textarea class="form-control" name="comment" rows="6" ng-model="userComment.comment" required>
</textarea>
<span ng-show="commentForm.comment.$error.required &&
!commentForm.comment.$pristine" class="help-block">
Your comment is required.
</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary"
ng-disabled="commentForm.$invalid">Send Comment</button>
</div>
</div>
</form>
有任何想法吗?
谢谢西奥
PS。不用担心ng-show,ng-click或ng-model等不同的指令。
最佳答案
更改:
<label class="col-sm-3 control-label">Number of stars</label>
<div class="radio col-sm-9">
至:
<label class="col-sm-2 control-label">Number of stars</label>
<div class="col-sm-10">
关于css - 将标签与水平单选按钮对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42435318/