AngularJS 1.xは検証に依存する

Question

次の3つの入力フィールドがあります。

<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)"/> 

と次の2つの選択ボックス。

<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これは働いているが、私はすでに別の検証のためにNG-必要を使用し、そのき

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>