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

时间:2018-12-26 09:03:01

标签: angularjs validation

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

1 个答案:

答案 0 :(得分:0)

只需使用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>