AngularJS: Bagaimana cara mengatur input secara manual ke $ valid di controller?

92

Menggunakan plugin TokenInput dan menggunakan validasi formController bawaan AngularJS.

Saat ini saya mencoba untuk memeriksa apakah bidang tersebut berisi teks, dan kemudian menyetel bidang ke valid jika memang demikian. Masalah dengan menggunakan plugin adalah itu menciptakan inputnya sendiri dan kemudian ul + li untuk stlying.

Saya memiliki akses ke addItem (formname) dan kemampuan saya di controller, saya hanya perlu mengaturnya ke $ valid.

Markup.

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

Saya menjalankan fungsi abilityValidation ketika TokenInput memiliki sesuatu yang masuk dan meneruskan objek.

EDIT:

Mengetahui ng-model pada masukan saya melakukan banyak hal dan mendapatkan hasil pelengkapan otomatis, itulah sebabnya saya tidak bisa mendapatkan ng-valid untuk bekerja karena didasarkan pada model.

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

Saya tidak menulis implementasi pelengkapan otomatis ini, apakah ada cara lain untuk melakukan ini di mana saya akan memiliki akses ke attr model-ng dan memindahkan fungsi model ke tempat lain?

Christopher Marshall
sumber
1
Karena plugin Anda membuat inputnya sendiri, dan Anda telah menulis fungsi untuk melakukan validasi Anda sendiri, mengapa tidak menggunakan properti $ scope Anda sendiri untuk validasi juga: <div ... data-ng-show="capabilities_error" ...> Dengan kata lain, apakah ada alasan Anda ingin / perlu menggunakan FormController?
Mark Rajcok
2
Karena semua bentuk saya yang lain menggunakannya, saya ingin tetap mengontrol yang diberikannya. Plugin yang dibuat input sebenarnya menetapkan nilai dalam input asli saya, yang kemudian perlu saya periksa dalam validasi saya tetapi tidak memperbarui formController ketika ada nilai yang dimasukkan.
Christopher Marshall
I Mempersingkat markup dengan sengaja untuk mengisolasi input. Saya memiliki lebih banyak masukan dalam bentuk yang sama ini.
Christopher Marshall
1
Baik. Apakah Anda mencoba addItem.capabilities.$valid = truedan / atau menyetel addItem.capabilities. $ Error.required menjadi true atau false sebagaimana mestinya?
Mark Rajcok
Saya mencoba keduanya. Saya akan memperbarui pertanyaan saya untuk ditunjukkan kepada Anda. $ Valid dan $ error.required ditampilkan sebagai tidak terdefinisi pada breakpoint saya di pengontrol tetapi addItem.capabilities masih memiliki data.
Christopher Marshall

Jawaban:

150

Anda tidak dapat langsung mengubah validitas formulir. Jika semua input turunan valid, formulirnya valid, jika tidak, maka tidak.

Yang harus Anda lakukan adalah mengatur validitas elemen input. Seperti itu;

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

Sekarang masukan (dan formulir) tidak valid. Anda juga dapat melihat kesalahan mana yang menyebabkan pembatalan.

addItem.capabilities.errors.youAreFat == true;
Umur Kontacı
sumber
1
Bagaimana jika capabilitiesvariabel? Saya memiliki array yang berisi nama input dan saya ingin mengulang di dalam array dan mengaturnya tidak valid satu per satu: /
lightalex
1
Apa yang Anda maksud dengan variabel? Itu terkait langsung dengan bentuk itu sendiri, bukan nilai dalam bentuk. Ini menggunakan nameatribut formulir dan atribut masukan id. Ini berbeda dari nilai yang ditetapkan olehngModel
Umur Kontacı
11
Saya menemukan solusinya tetapi inilah yang saya maksud:$scope.addItem['myVariableName'].$setValidity("youAreFat", false);
lightalex
Setelah ini tampak bahwa beberapa bidang input tidak divalidasi lagi saat diubah atau kabur
Leonardo
4
Pada angular 1.4.7 dan saya harus mengawali kode ini dengan $ scope ..$scope.addItem.capabilities.$setValidity("youAreFat", false);
Graham T
60

Jawaban di atas tidak membantu saya memecahkan masalah saya. Setelah pencarian yang lama, saya menemukan solusi parsial ini .

Saya akhirnya memecahkan masalah saya dengan kode ini untuk mengatur field input secara manual ke ng-invalid (untuk mengatur ke ng-valid atur ke 'true'):

$scope.myForm.inputName.$setValidity('required', false);
notMyName
sumber
3
Saya melakukan hal yang sama dan berhasil dengan baik. Tetapi sekarang saya memiliki beberapa masalah dalam memvalidasi ulang bidang yang sama. Itu tidak berubah ke keadaan yang berubah, yang sangat aneh. Saya menggunakan ng-model-options = "{updateOn: 'submit'}" untuk memvalidasi saat mengklik tombol. Ada pemikiran tentang ini?
OliverKK
1
@OliverKK Anda harus memanggil $setValiditydengan truesebagai parameter kedua setiap kali input valid.
Bernhard Hofmann
10
tidak masuk akal untuk menggunakan rootscope, sebaiknya hanya cakupan
Ryan M
1
Saya mencoba solusi serupa, tetapi masalah yang saya temukan adalah jika saya kemudian mencoba mengubah nilai kontrol dalam bentuk, tetap tidak valid. Dalam kasus saya kontrol itu adalah arahan dengan seleksi batin. Jika saya menyetel tidak valid untuk direktif saya (yaitu ng-form), maka saya tidak dapat menghapus status tidak valid tersebut.
Naomi
18

Saya menemukan posting ini dengan masalah serupa. Perbaikan saya adalah menambahkan bidang tersembunyi untuk menahan status saya yang tidak valid.

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

Dalam kasus saya, saya memiliki bool nullable yang seseorang harus memilih salah satu dari dua tombol yang berbeda. jika mereka menjawab ya, entitas ditambahkan ke koleksi dan status tombol berubah. Sampai semua pertanyaan dijawab, (salah satu tombol di masing-masing pasangan memiliki klik) formulir tidak valid.

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>
James Fleming
sumber
2

Ini sangat sederhana. Misalnya: di dalam Anda pengontrol JS gunakan ini:

$scope.inputngmodel.$valid = false;

atau

$scope.inputngmodel.$invalid = true;

atau

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

atau

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

Semua bekerja untuk saya untuk kebutuhan yang berbeda. Hubungi jika ini menyelesaikan masalah Anda.

rahim.nagori
sumber