programing

AngularJS: 컨트롤러에서 입력을 $valid로 수동으로 설정하는 방법

nicescript 2023. 2. 11. 16:19
반응형

AngularJS: 컨트롤러에서 입력을 $valid로 수동으로 설정하는 방법

TokenInput 플러그인 및 Angular 사용JS 빌트인 폼컨트롤러 검증.

현재 필드에 텍스트가 포함되어 있는지 확인하고 텍스트가 포함되어 있으면 필드를 유효하게 설정하려고 합니다.플러그인 사용 시 문제는 플러그인이 자체 입력을 생성하고 그 후 sting을 위한 ul+li를 생성하는 것입니다.

컨트롤러의 addItem(폼명)과 기능에 액세스 할 수 있습니다.그냥 $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;
  }
};

capabilityValidation 기능을 실행하고 있는데, TokenInput이 오브젝트에 입력 및 전달되는 것이 있습니다.

편집:

내 입력에서 ng-model이 작업을 수행하고 자동 완성 결과를 얻었기 때문에 ng-model이 모델에 기반하고 있기 때문에 작업을 수행할 수 없습니다.

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

저는 이 자동 완성 구현을 작성하지 않았습니다.ng-model attr에 접속하여 모델 기능을 다른 곳으로 이동할 수 있는 다른 방법은 없습니까?

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

필요한 것은 입력 요소의 유효성을 설정하는 것입니다.이렇게.

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;

요구 사항이 다르면 모든 것이 제겐 잘 맞습니다.이것으로 문제가 해결되면 전화하세요.

날짜 오류에 대해 이 작업을 수행하려면 $setValidity를 호출하기 전에 먼저 오류를 삭제해야 했습니다.

delete currentmodal.form.$error.date;
currentmodal.form.$setValidity('myDate', true);

언급URL : https://stackoverflow.com/questions/15437435/angularjs-how-do-i-manually-set-input-to-valid-in-controller

반응형