AngularJS: Làm cách nào để đặt đầu vào theo cách thủ công thành $ hợp lệ trong bộ điều khiển?

Sử dụng plugin TokenInput và sử dụng xác thực formController tích hợp sẵn trong AngularJS.

Ngay bây giờ, tôi đang cố gắng kiểm tra xem trường có chứa văn bản hay không và sau đó đặt trường thành hợp lệ nếu có. Vấn đề với việc sử dụng plugin là nó tạo ra đầu vào của riêng nó và sau đó là ul + li để đọc.

Tôi có quyền truy cập vào addItem (tên biểu mẫu) và tài khoản của tôi trong bộ điều khiển, tôi chỉ cần đặt nó thành $ hợp lệ.

Đánh dấu.

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

Tôi đang chạy chức năng abilityValidation khi TokenInput có nội dung nào đó được nhập và truyền vào đối tượng.

BIÊN TẬP:

Tìm thấy ng-model trên đầu vào của tôi thực hiện công việc và nhận được kết quả tự động hoàn thành, đó là lý do tại sao tôi không thể làm cho ng-valid hoạt động vì nó dựa trên mô hình.

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

Tôi đã không viết phần triển khai tự động hoàn thành này, có cách nào khác để thực hiện việc này trong đó tôi có quyền truy cập vào ng-model attr và di chuyển chức năng mô hình đến một nơi khác không?

Bạn không thể thay đổi trực tiếp tính hợp lệ của biểu mẫu. Nếu tất cả các đầu vào hậu duệ là hợp lệ, biểu mẫu là hợp lệ, nếu không, thì không phải.

Những gì bạn nên làm là thiết lập tính hợp lệ của phần tử đầu vào. Như vậy;

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

Bây giờ đầu vào (và vì vậy biểu mẫu) không hợp lệ. Bạn cũng có thể xem lỗi nào gây ra sự vô hiệu.

addItem.capabilities.errors.youAreFat == true;

Các câu trả lời ở trên không giúp tôi giải quyết vấn đề của mình. Sau một thời gian dài tìm kiếm, tôi đã tìm ra giải pháp từng phần này .

Cuối cùng tôi đã giải quyết được vấn đề của mình với mã này để đặt trường nhập theo cách thủ công thành ng-không hợp lệ (để đặt thành ng-hợp lệ, hãy đặt trường đó thành 'đúng'):

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

Tôi đã xem qua bài đăng này với một vấn đề tương tự. Cách khắc phục của tôi là thêm một trường ẩn để giữ trạng thái không hợp lệ cho tôi.

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

Trong trường hợp của tôi, tôi có một bool có thể nullable mà một người phải chọn một trong hai nút khác nhau. nếu họ trả lời có, một thực thể sẽ được thêm vào bộ sưu tập và trạng thái của nút sẽ thay đổi. Cho đến khi tất cả các câu hỏi được trả lời, (một trong các nút trong mỗi cặp có một lần nhấp) thì biểu mẫu không hợp lệ.

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>

Nó rất đơn giản. Ví dụ: trong bộ điều khiển JS của bạn, hãy sử dụng cái này:

$scope.inputngmodel.$valid = false;

hoặc là

$scope.inputngmodel.$invalid = true;

hoặc là

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

hoặc là

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

Tất cả làm việc cho tôi cho các yêu cầu khác nhau. Hãy đánh nếu điều này giải quyết được vấn đề của bạn.