Проверка формы AngularJs при выборе переключателей

Question

Привет, я учусь на 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>

Answer 1

Возможно, попробуйте эту проверку: 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