时间戳

首页 > 解决方案 > 选择单选按钮时的AngularJs表单验证

angularjs - 选择单选按钮时的AngularJs表单验证

问题描述

嗨，我是 angularJS 的学习者，在我的表单中，我有姓名和电子邮件字段以及一个用于性别选择的无线电组，我的要求是当我选择男性时，姓名字段是必需的，如果我选择女性，则电子邮件字段是必需的

我已经尝试过下面的代码，但它不工作可以请有人帮助我

代码：

<form class="form-horizontal alert alert-warning" name="empList" id="empForm" ng-submit="insertInfo(empInfo)">

    <h3 class="text-center">Insert Employee Details Into Database</h3>

    <div class="form-group">
        <label for="Name">Employee Name:</label>
        <input type="text" name="emp_name" class="form-control" placeholder="Enter Employee Name" ng-model="empInfo.name"
            required="gender.value=='male'" />
    </div>

    <div class="form-group">
        <p class="text-danger" ng-show="empList.emp_name.$invalid">Name field is Empty!</p>
    </div>

    <div class="form-group">
        <label for="Email">Email Address:</label>
        <input type="email" name="emp_email" class="form-control" placeholder="Enter Employee Email Address" ng-model="empInfo.email"
            autofocus  required="gender.value=='female'"/>
    </div>
    <div class="form-group">
        <p class="text-danger" ng-show="empList.emp_email.$invalid>Invalid Email!</p>
    </div>

    <div class="form-group">
        <label for="Gender">Gender:</label>
        <label for="" class="radio-inline gender">
            <input type="radio" name="emp_gender" value="male" ng-model="empInfo.gender" #gender="ng-model">Male
        </label>
        <label for="" class="radio-inline gender">
            <input type="radio" name="emp_gender" value="female" ng-model="empInfo.gender" #gender="ng-model">Female
        </label>
    </div>

</form>

标签： angularjs

解决方案

也许尝试使用该验证： HTML ：

      <form class="form-horizontal alert alert-warning" name="empList" id="empForm" ng-submit="insertInfo(empInfo)">

    <h3 class="text-center">Insert Employee Details Into Database</h3>

    <div class="form-group">
        <label for="Name" ng-show="empInfo.gender != male_value">Employee Name is required</label>
        <input type="text" name="emp_name" class="form-control" placeholder="Enter Employee Name" ng-model="empInfo.name"
            required="gender.value=='male'" />
    </div>

    <div class="form-group">
        <p class="text-danger" ng-show="empList.emp_name.$invalid">Name field is Empty!</p>
    </div>

    <div class="form-group">
        <label for="Email" ng-show="empInfo.gender == male_value">Email Address is rquired</label>
        <input type="email" name="emp_email" class="form-control" placeholder="Enter Employee Email Address" ng-model="empInfo.email"
              required="gender.value=='female'"/>
    </div>
    <div class="form-group">
        <p class="text-danger" ng-show="empList.emp_email.$invalid">Invalid Email!</p>
    </div>

    <div class="form-group">
        <label for="Gender">Gender:</label>
        <label for="" class="radio-inline gender">
            <input type="radio" name="emp_gender" ng-value="male_value" ng-model="empInfo.gender">Male
        </label>
        <label for="" class="radio-inline gender">
            <input type="radio" name="emp_gender" ng-value="female" ng-model="empInfo.gender" >Female
        </label>
    </div>

</form>

JS：

 $scope.male_value = 'male';

plunker：http ://plnkr.co/edit/Hi5t1gU5TIdNx670wHo1?p=preview

推荐阅读