AngularJS: ฉันจะตั้งค่าอินพุตเป็น $ valid ในคอนโทรลเลอร์ด้วยตนเองได้อย่างไร

การใช้ปลั๊กอินTokenInputและการใช้การตรวจสอบความถูกต้องของฟอร์มคอนโทรลเลอร์ในตัว AngularJS

ตอนนี้ฉันกำลังพยายามตรวจสอบว่าฟิลด์มีข้อความหรือไม่จากนั้นตั้งค่าฟิลด์ให้ถูกต้องหากมี ปัญหาในการใช้ปลั๊กอินคือมันสร้างอินพุตของตัวเองจากนั้น ul + li สำหรับ stlying

ฉันสามารถเข้าถึง 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;
  }
};

ฉันกำลังเรียกใช้ฟังก์ชัน capacityValidation เมื่อ TokenInput มีบางสิ่งที่ป้อนและส่งผ่านในวัตถุ

แก้ไข:

พบว่า ng-model ในอินพุตของฉันทำสิ่งต่างๆและได้รับผลลัพธ์การเติมข้อความอัตโนมัติซึ่งเป็นสาเหตุที่ฉันไม่สามารถใช้งาน ng-valid ได้เนื่องจากเป็นไปตามโมเดล

$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 ให้ตั้งค่าเป็น 'จริง'):

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

ฉันเจอโพสต์นี้พร้อมกับปัญหาที่คล้ายกัน การแก้ไขของฉันคือการเพิ่มฟิลด์ที่ซ่อนไว้เพื่อระงับสถานะที่ไม่ถูกต้องให้ฉัน

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

ในกรณีของฉันฉันมีบูลที่เป็นโมฆะซึ่งบุคคลต้องเลือกหนึ่งในสองปุ่มที่แตกต่างกัน ถ้าพวกเขาตอบว่าใช่เอนทิตีจะถูกเพิ่มเข้าไปในคอลเลกชันและสถานะของปุ่มจะเปลี่ยนไป จนกว่าคำถามทั้งหมดจะได้รับคำตอบ (ปุ่มใดปุ่มหนึ่งในแต่ละคู่จะมีการคลิก) แบบฟอร์มไม่ถูกต้อง

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