как добавить «требуется» атрибут поля ввода на основе других полей значений

Question

У меня есть эти поля ввода:

<input class="text_field" id="ProfilePhoneNumber" phone-by-state="User.PhoneNumber" type="text" required/> 

<div class="btn-group"> 
    <button multi-select="User.Notifications.Phone" class="btn btn-default dropdown-toggle"> 
     Select Severities <span class="caret"></span></button> 
    <ul multi-select-dropdown class="dropdown-menu"> 
     <li> 
      <input type="checkbox" id="NotificationsPhone_1" 
        ng-model="User.Notifications.Phone.High"> 
      <label for="NotificationsPhone_1">High</label> 
     </li> 
     <li> 
      <input type="checkbox" id="NotificationsPhone_2" 
        ng-model="User.Notifications.Phone.Medium"> 
      <label for="NotificationsPhone_2">Medium</label> 
     </li> 
     <li> 
      <input type="checkbox" id="NotificationsPhone_3" 
        ng-model="User.Notifications.Phone.Low"> 
      <label for="NotificationsPhone_3">Low</label> 
     </li> 
    </ul> 
</div> 

<div><input id="SMS" type="checkbox" 
     ng-model="User.SMS.Enabled">SMS Enable 
</div> 

Я хочу, чтобы удалить «необходимый атрибут» из текстового поля ProfilePhoneNumber и сделать это требуется только если проверено хотя бы 1 из этих других флажков.

Могу ли я сделать это через HTML? Угловая? JQuery? Каков наилучший способ?

Answer 1

вы можете использовать ng-required здесь

<input class="text_field" id="ProfilePhoneNumber" phone-by-state="User.PhoneNumber" type="text" 
    ng-required="User.Notifications.Phone.High == 1 || User.Notifications.Phone.Medium == 1 || User.Notifications.Phone.Low == 1 || User.SMS.Enabled == 1" /> 

ng-required воли множества required атрибутов на элементе, если выражение переходит к ng-required множеств true.

Answer 2

Вы можете использовать angularjs "нг-необходимый"

<input class="text_field" id="ProfilePhoneNumber" phone-by-state="User.PhoneNumber" type="text" ng-required="User.Notifications.Phone.High || User.Notifications.Phone.Medium || User.Notifications.Phone.Low"/> 

<div class="btn-group"> 
    <button multi-select="User.Notifications.Phone" class="btn btn-default dropdown-toggle"> 
     Select Severities <span class="caret"></span></button> 
    <ul multi-select-dropdown class="dropdown-menu"> 
     <li> 
      <input type="checkbox" id="NotificationsPhone_1" 
        ng-model="User.Notifications.Phone.High"> 
      <label for="NotificationsPhone_1">High</label> 
     </li> 
     <li> 
      <input type="checkbox" id="NotificationsPhone_2" 
        ng-model="User.Notifications.Phone.Medium"> 
      <label for="NotificationsPhone_2">Medium</label> 
     </li> 
     <li> 
      <input type="checkbox" id="NotificationsPhone_3" 
        ng-model="User.Notifications.Phone.Low"> 
      <label for="NotificationsPhone_3">Low</label> 
     </li> 
    </ul> 
</div>