sourcetip

AngularJS: 숨김 양식 필드의 유효성을 검사하지 않습니다.

fileupload 2023. 3. 4. 15:07
반응형

AngularJS: 숨김 양식 필드의 유효성을 검사하지 않습니다.

숨겨진 양식 필드가 AngularJS에서 검증되지 않도록 하는 가장 좋은 방법은 무엇입니까?

처음에 빌트인을 놓쳤습니다.ngRequired지시.이 있습니다.required꼬리표도 달아서 헷갈렸어요.

(요소를 숨기기 위해 사용한) 동일한 로직을 사용하여,ngRequired거짓의.

다음은 실제 사용 사례의 예입니다.기혼자에게 자녀 수를 묻고 싶은데, 기혼자가 아니라면 자녀에 대한 필드를 숨기면 됩니다.

<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');
      }
  }
});

참조

이전:

<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

반응형