时间戳

首页 > 解决方案 > 如何在 AgularJS 中进行单选按钮验证

angularjs - 如何在 AgularJS 中进行单选按钮验证

问题描述

我是 AngularJS 的初学者，我正在尝试使用下面的代码在 AngularJS 中显示引导错误验证我面临两个问题

1）使用下面的代码无线电组错误消息不显示我真的不明白为什么它不工作

2）我的第二个问题是只有当我选择电话号码单选按钮时才需要电话号码，否则它不需要我该怎么做？

有人能帮助我吗

代码

<form name="studentForm" ng-submit="saveEmployee()" role="form" novalidate>

    <div class="panel panel-primary">

        <div class="panel-heading">
            <h3 class="panel-title">Welcome</h3>
        </div>

        <div class="panel-body">

 <div class="form-group" ng-class="{'has-error': studentForm.phoneNumber.$touched && studentForm.phoneNumber.$invalid,
            'has-success': studentForm.phoneNumber.$valid }">
                <label for="phoneNumber" class="control-label">Phone Number</label>
                <input type="text" id="phoneNumber" name="phoneNumber" ng-model="employee.phoneNumber" class="form-control"
                    required>
                <span class="help-block" ng-if="studentForm.phoneNumber.$touched && studentForm.phoneNumber.$invalid">
                    Phone Number is required
                </span>
            </div>

 <div class="form-group" ng-class="{'has-error': studentForm.contactPreference.$touched && studentForm.contactPreference.$invalid,
            'has-success': studentForm.contactPreference.$valid }">
                <label for="gender" class="control-label">Contact Preference</label>
                <div class="form-control">
                    <label class="radio-inline">
                        <input type="radio" name="contactPreference" ng-model="employee.contactPreference" value="email"
                            required>
                        Email
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="contactPreference" ng-model="employee.contactPreference" value="phone"
                            required>
                        Phone Number
                    </label>
                </div>
                <span class="help-block" ng-if="studentForm.contactPreference.$touched && studentForm.contactPreference.$invalid">
                    Cintact preference is required
                </span>
            </div>
    </div>
</div>
</form>

标签： angularjsvalidation

解决方案

只需使用 required="!employee.contactPreference"

<div class="form-group" ng-class="{'has-error': studentForm.contactPreference.$touched && studentForm.contactPreference.$invalid,
            'has-success': studentForm.contactPreference.$valid }">
                <label for="gender" class="control-label">Contact Preference</label>
                <div class="form-control">
                    <label class="radio-inline">
                        <input type="radio" name="contactPreference" ng-model="employee.contactPreference" value="email" ng-required="!employee.contactPreference">
                        Email
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="contactPreference" ng-model="employee.contactPreference" value="phone" ng-required="!employee.contactPreference">
                        Phone Number
                    </label>
                </div>

推荐阅读