AngularJS: предотвращать проверку скрытых полей формы

Ответ 1

Сначала я пропустил встроенную директиву ngRequired. Существует также тег required, который меня смутил.

Теперь мы можем использовать ту же логику (которую мы использовали, чтобы скрыть элемент), чтобы установить ngRequired false.

Вот пример практического использования: я хочу спросить у замужних людей количество детей, которых они имеют, но, если они не состоят в браке, просто спрячьте поле о детях.

<form ng-app name="form">

    Marital status:
    <select  ng-model="maritalStatus" required>
        <option value="">Select...</option>
        <option value="M">Married</option>
        <option value="UM">Unmarried</option>
    </select>

    <div ng-show="maritalStatus == 'M'">
        Number of children: <input type="number" ng-model="children"  ng-required="maritalStatus == 'M'">
    </div>

    (for testing) Is this form correctly filled? {{form.$valid}}

</form>

Ответ 2

Вы также можете полностью добавить или удалить его из DOM/формы, используя ng-if вместо ng-show.

<div ng-show="maritalStatus === 'M'">
    Number of children: <input type="number" ng-model="children"  ng-required="maritalStatus == 'M'">
</div>

к этому

<div ng-if="maritalStatus === 'M'">
    Number of children: <input type="number" ng-model="children"  ng-required="true">
</div>

Ответ 3

Вы можете удалить атрибут required, используя директивы:

<div ng-app="myApp">   
 <input type="backbutton" id="firstName" name="firstName" type="text"  required/>

var app = angular.module('myApp',[]);

app.directive('input',function($compile){
  return {
    restrict:'E',
    compile:function($tElement,$tAttrs){
        console.log("hi there");
      var el = $tElement[0];
      if(el.getAttribute('type')){
        el.removeAttribute('type');
        el.setAttribute($tAttrs.type,'');
        return function(scope){
          $compile(el)(scope);
        }
      }

    }  
  }
});


app.directive('remove',function($compile){
  return {
    restrict: 'A',
    replace:true,
    template:'',
      link: function (scope, element, attrs) {
          element.removeAttr('required');
      }
  }
});

См. Здесь Fidlle

До:

<input id="firstName" name="firstName" required="" remove="" class="ng-scope">

После:

<input id="firstName" name="firstName" remove="" class="ng-scope">