I'm menggunakan metode ini: http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview hanya memvalidasi kolom pada kabur. Ini bekerja baik-baik saja, tapi saya juga ingin memvalidasi mereka (dan dengan demikian menunjukkan kesalahan untuk bidang-bidang jika ada) ketika pengguna mengklik 'submit' tombol (tidak nyata submit tapi data-ng-klik panggilan ke fungsi)
Ada beberapa cara untuk memicu validasi pada semua bidang lagi ketika mengklik tombol itu?
Aku tahu, itu's tad sedikit terlambat untuk menjawab, tapi semua yang perlu anda lakukan adalah, kekuatan semua bentuk kotor. Lihatlah cuplikan berikut:
angular.forEach($scope.myForm.$error.required, function(field) {
field.$setDirty();
});
dan kemudian anda dapat memeriksa jika anda bentuk adalah sah menggunakan:
if($scope.myForm.$valid) {
//Do something
}
dan akhirnya, saya kira, anda akan ingin mengubah rute anda jika semuanya terlihat baik-baik:
$location.path('/somePath');
Edit: bentuk won't mendaftarkan dirinya pada lingkup yang sampai menyerahkan peristiwa ini memicu. Hanya menggunakan ng-mengirimkan perintah untuk memanggil fungsi, dan bungkus di dalam fungsi itu, dan harus bekerja.
Apa yang bekerja untuk saya adalah menggunakan $setSubmitted
fungsi, yang pertama muncul di sudut docs dalam versi 1.3.20.
Dalam klik acara di mana saya ingin memicu validasi, saya melakukan hal-hal berikut:
vm.triggerSubmit = function() {
vm.homeForm.$setSubmitted();
...
}
Itu semua butuh waktu untuk saya. Menurut dokumen itu, "Menetapkan bentuk yang diserahkan negara." It's disebutkan di sini.
Dalam kasus seseorang datang kembali ke ini nanti... di atas Tidak ada yang bekerja untuk saya. Jadi saya menggali ke dalam nyali sudut validasi form dan fungsi mereka panggilan untuk melaksanakan validator pada bidang tertentu. Properti ini terletak disebut $memvalidasi
.
Jika anda bernama bentuk myForm
, pemrograman, anda dapat memanggil myForm.my_field.$validate()
untuk melaksanakan validasi lapangan. Misalnya:
<div ng-form name="myForm">
<input required name="my_field" type="text" ng-blur="myForm.my_field.$validate()">
</div>
Catatan bahwa panggilan $memvalidasi
memiliki implikasi untuk model anda. Dari sudut docs untuk ngModelCtrl.$validasi:
Berjalan masing-masing terdaftar validator (pertama sinkron validator dan kemudian asynchronous validator). Jika validitas perubahan tidak sah, model akan set to undefined, kecuali ngModelOptions.allowInvalid adalah benar. Jika validitas perubahan valid, itu akan mengatur model terakhir yang tersedia valid $modelValue, yaitu berupa terakhir diurai nilai atau nilai terakhir yang ditetapkan dari cakupan.
Jadi jika anda're berencana melakukan sesuatu dengan tidak sah model nilai (seperti muncul pesan yang mengatakan demikian), maka anda perlu untuk memastikan allowInvalid
diatur benar
untuk model anda.
Anda dapat menggunakan Sudut-Validator untuk melakukan apa yang anda inginkan. It's bodoh sederhana untuk digunakan.
Ini akan:
$kotor
atau submit
$kotor
atau formulir dikirimkanContoh
<form angular-validator
angular-validator-submit="myFunction(myBeautifulForm)"
name="myBeautifulForm">
<!-- form fields here -->
<button type="submit">Submit</button>
</form>
Jika lapangan tidak lulus validator
maka pengguna tidak akan bisa untuk mengirimkan formulir.
Check out sudut-validator kasus penggunaan dan contoh untuk informasi lebih lanjut.
Disclaimer: saya penulis dari Sudut-Validator
Nah, di sudut jalan akan membiarkan hal itu menangani validasi, - karena itu pada setiap perubahan model - dan hanya menampilkan hasilnya kepada pengguna, ketika anda ingin.
Dalam hal ini anda memutuskan kapan untuk menunjukkan kesalahan, anda hanya perlu mengatur bendera: http://plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l?p=preview
Sejauh yang saya tahu ada masalah yang diajukan ke sudut untuk memberitahu kami memiliki bentuk yang lebih canggih kontrol. Karena bukan soal saya akan menggunakan ini bukan reinventing semua yang ada validasi metode.
edit: Tapi jika anda bersikeras pada cara anda, berikut adalah modifikasi biola dengan validasi sebelum dikirim. http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview Controller siaran sebuah event ketika tombol diklik, dan direktif melakukan validasi sihir.
Salah satu pendekatan adalah untuk memaksa semua atribut untuk menjadi kotor. Anda dapat melakukannya di setiap controller, tapi itu akan sangat berantakan. Akan lebih baik untuk memiliki solusi umum.
Cara termudah yang dapat saya pikirkan adalah untuk menggunakan direktif
Di sini adalah petunjuk
myModule.directive('submit', function() {
return {
restrict: 'A',
link: function(scope, formElement, attrs) {
var form;
form = scope[attrs.name];
return formElement.bind('submit', function() {
angular.forEach(form, function(field, name) {
if (typeof name === 'string' && !name.match('^[\$]')) {
if (field.$pristine) {
return field.$setViewValue(field.$value);
}
}
});
if (form.$valid) {
return scope.$apply(attrs.submit);
}
});
}
};
});
Dan memperbarui bentuk html, misalnya:
<form ng-submit='justDoIt()'>
menjadi:
<form name='myForm' novalidate submit='justDoIt()'>
Melihat contoh berikut ini: http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu?p=preview
Berikut adalah fungsi global untuk menunjukkan bentuk pesan kesalahan.
function show_validation_erros(form_error_object) {
angular.forEach(form_error_object, function (objArrayFields, errorName) {
angular.forEach(objArrayFields, function (objArrayField, key) {
objArrayField.$setDirty();
});
});
};
Dan di setiap controller,
if ($scope.form_add_sale.$invalid) {
$scope.global.show_validation_erros($scope.form_add_sale.$error);
}
Berdasarkan Thilak's jawaban saya mampu untuk datang dengan solusi ini...
Sejak saya bentuk bidang yang hanya menampilkan pesan validasi jika lapangan adalah tidak sah, dan telah tersentuh oleh pengguna saya dapat menggunakan kode ini dipicu oleh sebuah tombol untuk menunjukkan saya tidak valid bidang:
// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
angular.forEach(error, function(field) {
field.$setTouched();
});
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
isValid = false;
}
<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">
<!-- field label -->
<label class="control-label">Suffix</label>
<!-- end field label -->
<!-- field input -->
<select name="Parent_Suffix__c" class="form-control"
ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
ng-model="rfi.contact.Parent_Suffix__c" />
<!-- end field input -->
<!-- field help -->
<span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
<span ng-message="required">this field is required</span>
</span>
<!-- end field help -->
</div>
<!-- end form field -->
Catatan: saya tahu ini adalah hack, tapi itu berguna untuk Sudut 1.2 dan sebelumnya yang tidak't menyediakan mekanisme sederhana.
Validasi tendangan pada **** perubahan acara, jadi beberapa hal seperti mengubah nilai-nilai pemrograman won't memicu itu. Tapi memicu perubahan acara akan memicu validasi. Misalnya, dengan jQuery:
$('#formField1, #formField2').trigger('change');
Anda dapat mencoba ini:
// The controller
$scope.submitForm = function(form){
//Force the field validation
angular.forEach(form, function(obj){
if(angular.isObject(obj) && angular.isDefined(obj.$setDirty))
{
obj.$setDirty();
}
})
if (form.$valid){
$scope.myResource.$save(function(data){
//....
});
}
}
<!-- FORM -->
<form name="myForm" role="form" novalidate="novalidate">
<!-- FORM GROUP to field 1 -->
<div class="form-group" ng-class="{ 'has-error' : myForm.field1.$invalid && myForm.field1.$dirty }">
<label for="field1">My field 1</label>
<span class="nullable">
<select name="field1" ng-model="myresource.field1" ng-options="list.id as list.name for list in listofall"
class="form-control input-sm" required>
<option value="">Select One</option>
</select>
</span>
<div ng-if="myForm.field1.$dirty" ng-messages="myForm.field1.$error" ng-messages-include="mymessages"></div>
</div>
<!-- FORM GROUP to field 2 -->
<div class="form-group" ng-class="{ 'has-error' : myForm.field2.$invalid && myForm.field2.$dirty }">
<label class="control-label labelsmall" for="field2">field2</label>
<input name="field2" min="1" placeholder="" ng-model="myresource.field2" type="number"
class="form-control input-sm" required>
<div ng-if="myForm.field2.$dirty" ng-messages="myForm.field2.$error" ng-messages-include="mymessages"></div>
</div>
</form>
<!-- ... -->
<button type="submit" ng-click="submitForm(myForm)">Send</button>
Aku suka pendekatan dalam menangani validasi pada klik tombol.
Ada tidak perlu untuk memohon sesuatu dari controller,
it's semua ditangani dengan direktif.
pada github
Aku melakukan hal-hal berikut ini untuk membuatnya bekerja.
<form name="form" name="plantRegistrationForm">
<div ng-class="{ 'has-error': (form.$submitted || form.headerName.$touched) && form.headerName.$invalid }">
<div class="col-md-3">
<div class="label-color">HEADER NAME
<span class="red"><strong>*</strong></span></div>
</div>
<div class="col-md-9">
<input type="text" name="headerName" id="headerName"
ng-model="header.headerName"
maxlength="100"
class="form-control" required>
<div ng-show="form.$submitted || form.headerName.$touched">
<span ng-show="form.headerName.$invalid"
class="label-color validation-message">Header Name is required</span>
</div>
</div>
</div>
<button ng-click="addHeader(form, header)"
type="button"
class="btn btn-default pull-right">Add Header
</button>
</form>
Di controller yang dapat anda lakukan;
addHeader(form, header){
let self = this;
form.$submitted = true;
...
}
Anda perlu beberapa css sekaligus;
.label-color {
color: $gray-color;
}
.has-error {
.label-color {
color: rgb(221, 25, 29);
}
.select2-choice.ui-select-match.select2-default {
border-color: #e84e40;
}
}
.validation-message {
font-size: 0.875em;
}
.max-width {
width: 100%;
min-width: 100%;
}