[javascript] AngularJS : 컨트롤러에서 입력을 $ valid로 수동으로 설정하는 방법은 무엇입니까?

Program / 글쓴이

은 Using TokenInput의 플러그인 및 내장 FormController에 확인 AngularJS와를 사용하여.

지금은 필드에 텍스트가 포함되어 있는지 확인하고있는 경우 필드를 유효한 것으로 설정하려고합니다. 플러그인 사용의 문제는 자체 입력을 생성 한 다음 stlying을위한 ul + li를 생성한다는 것입니다.

컨트롤러에서 addItem (formname) 및 내 기능에 액세스 할 수 있습니다. $ valid로 설정하기 만하면됩니다.

마크 업.

<form class="form-horizontal add-inventory-item" name="addItem">
     <input id="capabilities" name="capabilities" token-input data-ng-model="inventoryCapabilitiesAutoComplete" data-on-add="addCapability()" data-on-delete="removeCapability()" required>
     <div class="required" data-ng-show="addItem.capabilities.$error.required" title="Please enter capability."></div>
</form>

JS.

$scope.capabilityValidation = function (capability) {
  if (capability.name !== "") {
    addItem.capabilities.$valid = true;
    addItem.capabilities.$error.required = false;
  } else {
    addItem.capabilities.$valid = false;
    addItem.capabilities.$error.required = true;
  }
};

TokenInput에 무언가가 입력되어 개체에 전달되면 capabilityValidation 함수를 실행하고 있습니다.

편집하다:

내 입력에 대한 ng-model이 작업을 수행하고 자동 완성 결과를 얻습니다. 그래서 모델을 기반으로하므로 ng-valid를 사용할 수 없습니다.

$scope.inventoryCapabilitiesAutoComplete = {
  options: {
    tokenLimit: null
  },
  source: urlHelper.getAutoComplete('capability')
};

이 자동 완성 구현을 작성하지 않았습니다. ng-model 속성에 액세스하고 모델 함수를 다른 곳으로 옮길 수있는 또 다른 방법이 있습니까?

답변

양식의 유효성을 직접 변경할 수 없습니다. 모든 하위 입력이 유효하면 양식이 유효하고 유효하지 않으면 유효하지 않습니다.

해야 할 일은 입력 요소의 유효성을 설정하는 것입니다. 그렇게;

addItem.capabilities.$setValidity("youAreFat", false);

이제 입력 (및 양식)이 유효하지 않습니다. 또한 어떤 오류가 무효화를 일으키는지도 확인할 수 있습니다.

addItem.capabilities.errors.youAreFat == true;

답변

위의 답변은 내 문제를 해결하는 데 도움이되지 않았습니다. 긴 검색 끝에 나는이 부분적인 해결책에 부딪혔다 .

마침내 입력 필드를 ng-invalid로 수동으로 설정하는이 코드로 문제를 해결했습니다 (ng-valid로 설정하려면 ‘true’로 설정).

$scope.myForm.inputName.$setValidity('required', false);

답변

비슷한 문제가있는이 게시물을 보았습니다. 내 수정 사항은 잘못된 상태를 유지하기 위해 숨겨진 필드를 추가하는 것이 었습니다.

<input type="hidden" ng-model="vm.application.isValid" required="" />

제 경우에는 사람이 두 개의 다른 버튼 중 하나를 선택해야하는 nullable bool이있었습니다. 예라고 답하면 엔티티가 컬렉션에 추가되고 버튼 상태가 변경됩니다. 모든 질문에 답할 때까지 (각 쌍의 버튼 중 하나를 클릭 할 때까지) 양식이 유효하지 않습니다.

vm.hasHighSchool = function (attended) {
  vm.application.hasHighSchool = attended;
  applicationSvc.addSchool(attended, 1, vm.application);
}
<input type="hidden" ng-model="vm.application.hasHighSchool" required="" />
<div class="row">
  <div class="col-lg-3"><label>Did You Attend High School?</label><label class="required" ng-hide="vm.application.hasHighSchool != undefined">*</label></div>
  <div class="col-lg-2">
    <button value="Yes" title="Yes" ng-click="vm.hasHighSchool(true)" class="btn btn-default" ng-class="{'btn-success': vm.application.hasHighSchool == true}">Yes</button>
    <button value="No" title="No" ng-click="vm.hasHighSchool(false)" class="btn btn-default" ng-class="{'btn-success':  vm.application.hasHighSchool == false}">No</button>
  </div>
</div>

답변

매우 간단합니다. 예를 들어 : JS 컨트롤러에서 다음을 사용하십시오.

$scope.inputngmodel.$valid = false;

또는

$scope.inputngmodel.$invalid = true;

또는

$scope.formname.inputngmodel.$valid = false;

또는

$scope.formname.inputngmodel.$invalid = true;

모두 다른 요구 사항에 대해 나를 위해 작동합니다. 이것이 문제를 해결하면 누르십시오.

답변