AngularJS 1.x зависит от проверки

У меня есть следующие три поля ввода;

<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 для мобильных, рабочих и пейджерных полей ввода для другой проверки.


javascript validation angularjs angularjs-1.6
person karthi    schedule 03.08.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете обернуть входные данные в форму и выполнить проверки. Проверьте, является ли 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>

person Vivz    schedule 03.08.2017
comment
Это работает, но я уже использовал ng-required для другой проверки, и он отображает другое сообщение об ошибке. - person karthi; 03.08.2017
comment
Уже использовали ng-required для другой проверки, и он отображает другое сообщение об ошибке? Вы можете изменить вышеуказанные ошибки на все, что захотите. @karthi - person Vivz; 03.08.2017
comment
Я использую ng-required="!(addCareAdminController.careAdminModel.mobilePhone || addCareAdminController.careAdminModel.pagerPhone)" для другой проверки, и соответствующее сообщение об ошибке — <div class="error" data-ng-message="required">Please fill at least 1 of these fields.</div>. В этом, как я могу интегрировать ваш. - person karthi; 03.08.2017
comment
Вышеприведенное для какого поля ввода? - person Vivz; 03.08.2017
comment
Для всех трех полей ввода (мобильный, рабочий и пейджер). У меня есть вышеуказанная проверка. - person karthi; 03.08.2017
comment
Вы должны изменить проверки из приведенного выше на что-то вроде ответа. Вы можете напрямую проверить, какой ввод требуется или нет, вместо проверки косвенно. но если вы хотите показать только одно сообщение об ошибке, проверьте, действительна ли форма или нет - person Vivz; 03.08.2017
comment
Мне нужны два вида проверок здесь. Тот, который я реализовал, проверяет, присутствует ли одно из трех полей ввода (мобильный, рабочий и пейджер). Другой - это то, что я задал как вопрос. - person karthi; 03.08.2017
comment
Является ли ваш выбор обязательным? Если это так, то по умолчанию вышеуказанные проверки позаботятся о первом. В противном случае попробуйте обновленный ответ и посмотрите - person Vivz; 03.08.2017

arrow_upward
0
arrow_downward 

<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"}
   ]
 }]);

Примечание. Эта проверка срабатывает при отправке формы.

person Community    schedule 03.08.2017