AngularJS 1.x取决于验证

Question

我有以下三个输入字段;

<input type="text" autocomplete="off" name="work_phone" id="work_phone" 
    placeholder="Work Phone" class="form-control" 
    data-ng-model="addCareAdminController.careAdminModel.workPhone" 
    data-ng-required="!(addCareAdminController.careAdminModel.mobilePhone 
    || addCareAdminController.careAdminModel.pagerPhone)"/> 

<input type="text" autocomplete="off" name="mobile_phone" id="mobile_phone" 
    placeholder="Mobile Phone" class="form-control" 
    data-ng-model="addCareAdminController.careAdminModel.mobilePhone" 
    data-ng-required="!(addCareAdminController.careAdminModel.workPhone 
    || addCareAdminController.careAdminModel.pagerPhone)"/> 

<input type="text" autocomplete="off" name="pager_phone" id="pager_phone" 
    placeholder="Pager Number" class="form-control" 
    data-ng-model="addCareAdminController.careAdminModel.pagerPhone" 
    data-ng-required="!(addCareAdminController.careAdminModel.workPhone 
    || addCareAdminController.careAdminModel.mobilePhone)"/> 

和以下两个选择框;

<select name="primary_communication" id="primary_communication" class="form-control" 
data-ng-model="addCareAdminController.careAdminModel.primaryCommunication" 
data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes"> 
    <option value="">Select Primary Communication</option>              
</select> 

<select name="secondary_communication" id="secondary_communication" class="form-control" 
data-ng-model="addCareAdminController.careAdminModel.secondaryCommunication" 
data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes"> 
    <option value="">Select Secondary Communication</option>              
</select> 

上面的选择框以下面的对象数组作为值;

self.communicationTypes = [ 
{code: "CMPH", groupCode: "COMM-METH", description: "Mobile Phone"} 
{code: "CWPH", groupCode: "COMM-METH", description: "Work Phone"} 
{code: "CPNO", groupCode: "COMM-METH", description: "Pager Number"} 
{code: "CEMA", groupCode: "COMM-METH", description: "Email"} 
] 

，我需要的是验证就像当我选择从主要通信选择框的任何选项说“手机”，如果对手机的输入字段不设置任何值，我需要在输入栏下方显示错误消息。对于其他选项也是如此。我也想要二次通信的效果。

说明：我已经在手机上使用了ng-required，工作&寻呼机输入字段进行了另一种验证。

Answer 1

<form class="login-form" name="Form" id="Form" ng-controller="AddCareAdminController as addCareAdminController" ng-submit="loginForm.$valid && addCareAdminController.save()" novalidate> 
    <input type="text" autocomplete="off" name="work_phone" id="work_phone" placeholder="Work Phone" class="form-control" data-ng-model="addCareAdminController.careAdminModel.workPhone" data-ng-required="addCareAdminController.careAdminModel.primaryCommunication=='CWPH'||addCareAdminController.careAdminModel.secondaryCommunication=='CWPH'" data-ng-model="addCareAdminController.careAdminModel.mobilePhone" data-ng-required="addCareAdminController.careAdminModel.primaryCommunication=='CMPH'||addCareAdminController.careAdminModel.secondaryCommunication=='CMPH'" required="true"/> 
    <span class="text-danger" ng-show="Form.$submitted && Form.work_phone.$error.required"><b>Enter valid Work Pager</b></span> 

    <input type="text" autocomplete="off" name="mobile_phone" id="mobile_phone" placeholder="Mobile Phone" class="form-control" data-ng-model="addCareAdminController.careAdminModel.mobilePhone" data-ng-required="addCareAdminController.careAdminModel.primaryCommunication=='CPNO'||addCareAdminController.careAdminModel.secondaryCommunication=='CPNO'" required="true"/> 
    <span class="text-danger" ng-show="Form.$submitted && Form.mobile_phone.$error.required"><b>Enter valid Mobile Phone</b></span> 

    <input type="text" autocomplete="off" name="pager_phone" id="pager_phone" placeholder="Pager Number" class="form-control" data-ng-model="addCareAdminController.careAdminModel.pagerPhone"/> 
    <span class="text-danger" ng-show="Form.$submitted && Form.pager_phone.$error.required"><b>Enter valid Page Phone</b></span> 

    <select name="primary_communication" id="primary_communication" class="form-control" data-ng-model="addCareAdminController.careAdminModel.primaryCommunication" data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes"> 
     <option value="">Select Primary Communication</option>              
    </select> 
    <span class="text-danger" ng-show="Form.$submitted && Form.primary_communication.$error.required"><b>Select primary communication</b></span> 

    <select name="secondary_communication" id="secondary_communication" class="form-control" data-ng-model="addCareAdminController.careAdminModel.secondaryCommunication" data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes"> 
     <option value="">Select Secondary Communication</option></select> 
    <span class="text-danger" ng-show="Form.$submitted && Form.secondary_communication.$error.required"><b>Select secondary communication</b></span> 
</form> 

控制器代码： -

var App = angular.module('App', []); 
    App.controller('AddCareAdminController', ['$scope', function ($scope) { 
    var self=this; 
    self.communicationTypes = [ 
    {code: "CMPH", groupCode: "COMM-METH", description: "Mobile Phone"}, 
    {code: "CWPH", groupCode: "COMM-METH", description: "Work Phone"}, 
    {code: "CPNO", groupCode: "COMM-METH", description: "Pager Number"}, 
    {code: "CEMA", groupCode: "COMM-METH", description: "Email"} 
    ] 
}]); 

注意：此验证的形式提交火。

Answer 2

您可以将输入封装在表单中并进行验证。检查的选择ng-model是移动的，工作或寻呼机电话启用必填字段为相应的输入

var myApp = angular.module('myApp', []); 
 
myApp.controller('myController', ['$scope', function ($scope) { 
 
var self=this; 
 
self.communicationTypes = [ 
 
{code: "CMPH", groupCode: "COMM-METH", description: "Mobile Phone"}, 
 
{code: "CWPH", groupCode: "COMM-METH", description: "Work Phone"}, 
 
{code: "CPNO", groupCode: "COMM-METH", description: "Pager Number"}, 
 
{code: "CEMA", groupCode: "COMM-METH", description: "Email"} 
 
] 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myController as addCareAdminController"> 
 
    <form name="phoneForm"> 
 
     <input type="text" autocomplete="off" name="work_phone" id="work_phone" placeholder="Work Phone" class="form-control" data-ng-model="addCareAdminController.careAdminModel.workPhone" data-ng-required="addCareAdminController.careAdminModel.primaryCommunication=='CWPH'||addCareAdminController.careAdminModel.secondaryCommunication=='CWPH'" /> 
 
     <span style="color:red;" ng-if="phoneForm.work_phone.$error.required">Work phone is required</span> 
 
     <input type="text" autocomplete="off" name="mobile_phone" id="mobile_phone" placeholder="Mobile Phone" class="form-control" data-ng-model="addCareAdminController.careAdminModel.mobilePhone" data-ng-required="addCareAdminController.careAdminModel.primaryCommunication=='CMPH'||addCareAdminController.careAdminModel.secondaryCommunication=='CMPH'" /> 
 
     <span ng-if="phoneForm.mobile_phone.$error.required" style="color:red;">Mobile phone is required</span> 
 
     <input type="text" autocomplete="off" name="pager_phone" id="pager_phone" placeholder="Pager Number" class="form-control" data-ng-model="addCareAdminController.careAdminModel.pagerPhone" data-ng-required="addCareAdminController.careAdminModel.primaryCommunication=='CPNO'||addCareAdminController.careAdminModel.secondaryCommunication=='CPNO'" /> 
 
     <span style="color:red;" ng-if="phoneForm.pager_phone.$error.required">Pager phone is required</span> 
 
     <span style="color:red;" ng-if="!(addCareAdminController.careAdminModel.primaryCommunication||addCareAdminController.careAdminModel.secondaryCommunication)&&!(addCareAdminController.careAdminModel.pagerPhone||addCareAdminController.careAdminModel.mobilePhone||addCareAdminController.careAdminModel.workPhone)">Please fill at least 1 of these fields. </span> 
 
     <select name="primary_communication" id="primary_communication" class="form-control" data-ng-model="addCareAdminController.careAdminModel.primaryCommunication" data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes"> 
 
      <option value="">Select Primary Communication</option> 
 
     </select> 
 

 
     <select name="secondary_communication" id="secondary_communication" class="form-control" data-ng-model="addCareAdminController.careAdminModel.secondaryCommunication" data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes"> 
 
      <option value="">Select Secondary Communication</option> 
 
     </select> 
 
    </form> 
 

 
</body>