AngularJS : 숨겨진 양식 필드의 유효성 검사 방지

AngularJS : 숨겨진 양식 필드의 유효성 검사 방지

---

AngularJS에서 숨겨진 양식 필드의 유효성이 검사되는 것을 방지하는 가장 좋은 방법은 무엇입니까?

---

처음에는 내장 ngRequired지시문을 놓쳤습니다 . 이 required저를 혼동뿐만 아니라 태그는.

이제 동일한 논리 (요소를 숨기는 데 사용)를 사용하여 ngRequiredfalse 를 설정할 수 있습니다.

다음은 실제 사용 사례입니다. 결혼 한 사람들에게 자녀의 수를 묻고 싶지만, 결혼하지 않은 경우 자녀에 대한 필드를 숨기면됩니다.

<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>

---

ng-show 대신 ng-if를 사용하여 DOM / 양식에서 완전히 추가하거나 제거 할 수도 있습니다.

<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>

---

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 here

전에:

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

후:

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

참조 URL : https://stackoverflow.com/questions/19114467/angularjs-prevent-hidden-form-fields-being-validated