Soru Angularjs ile form geçerliliğini nasıl kontrol edebilirim?


Angularjs için çok yeni. Uygulamamın bir formu olduğunu söyle. Müfettiş kullanarak, angularjs formun geçersiz olduğunu düşünürse, forma ng-geçersiz bir sınıf eklediğini fark ettim. Güzel.

Öyleyse, formun geçerli olup olmadığını kontrol etmek için kodumu JQuery selektörü ile kirletmem gerekiyor mu ?! Bir form denetleyicisi kullanmadan form geçerliliğini belirtmek için angularjs yolu nedir?


76
2018-01-13 01:40


Menşei


"bir form denetleyicisi kullanmadan" Neden bir denetleyici kullanmıyorsunuz? Bu açısal yol - KayEss


Cevaplar:


Koyduğun zaman <form> İçinizdeki etiket, AngularJS otomatik olarak form denetleyicisi ekler (aslında bir yönerge var, denir form Bu nessesary davranışını ekler). Name niteliğinin değeri kapsamınıza bağlı olacaktır; çok şey gibi <form name="yourformname">...</form> tatmin edecek:

Bir form, FormController örneğidir. Form örneği isteğe bağlı olarak name niteliğini kullanarak kapsam içine yayınlanabilir.

Bu nedenle form geçerliliğini kontrol etmek için, $scope.yourformname.$valid kapsamı

Daha fazla bilgi alabilirsiniz Geliştirici Kılavuzu bölümü formlar hakkında.


143
2018-01-13 02:25



Normalde JS'nin içinde çağrılırdı $scope.yourformname.$valid. - Dan Atkinson
her zaman hata var undefined özellik '$ geçerli' okunamıyor - John Nguyen
Formun açık bir şekilde <form name = "form"> gibi bir isim vermesi gerekir, ardından $ scope.form mevcut olmalıdır. - StrangeLoop
Özellik denetleyicide tanımlanmış gibi görünmüyorsa, denetleyicide bunu açıkça başlatır. $scope.myformname = {}; - Nicolas Janel
@JohnNguyen bende aynı hatayı aldım. Yaptığım bu geçici çözüm var. Gönderme işlevinizde, formu bir argüman olarak iletin. Daha sonra kontrolörünüze gidip formun yourFormName. $ $ geçerli olup olmadığını kontrol edebilirsiniz. Bu örneği Angular dokümantasyonunda kullandılar, onların plunker burada bulundu: plnkr.co/edit/Q8mlPOSgkaPstg4uvjlc?p=preview - devonJS


Örnek

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

36
2017-10-01 10:18





Ayrıca kullanabilirsiniz myform.$invalid

Örneğin.

if($scope.myform.$invalid){return;}

11
2017-09-26 18:20





form

  • modül ng yönergesi FormController'ı örnekleyen yönerge.

İsim özniteliği belirtilirse, form denetleyicisi bu ad altında mevcut kapsam üzerine yayınlanır.

Diğer ad: ngForm

Açısal olarak, formlar iç içe olabilir. Bu, dış formun, tüm çocuk formları da geçerli olduğunda geçerli olduğu anlamına gelir. Bununla birlikte, tarayıcılar öğelerin yuvalanmasına izin vermez, bu nedenle Açısal, aynı şekilde davranan fakat yuvalanabilen ngForm yönergesini sağlar. Bu, ngRepeat yönergesi kullanılarak dinamik olarak oluşturulan formlarda Angular doğrulama yönergeleri kullanıldığında çok yararlı olan yuvalanmış formlara sahip olmanızı sağlar. Girdi öğelerinin enterpolasyonu kullanarak ad özniteliğini dinamik olarak oluşturamayacağınız için, her bir yinelenen girdiyi bir ngForm yönergesine sarmanız ve bunları bir dış form öğesinin içine yerleştirmeniz gerekir.

CSS sınıfları

ng-geçerli form geçerliyse ayarlanır.

ng-geçersiz form geçersizse ayarlanır.

ng-bozulmamış form bozulmamışsa ayarlanır.

ng-kirli form kirli ise ayarlanır.

ng gönderilen form gönderildiyse ayarlanır.

NgAnimate'in eklendiğinde ve kaldırıldığında bu sınıfların her birini algılayabildiğini unutmayın.

Bir form göndermek ve varsayılan eylemi önlemek

İstemci tarafı Açısal uygulamalarındaki formların rolü, klasik gidiş-dönüş uygulamalarından farklı olduğu için, tarayıcının form gönderimini, verileri sunucuya gönderen tam sayfa yeniden yüklemesine dönüştürmemesi istenir. Bunun yerine, form teslimini uygulamaya özel bir şekilde işlemek için bazı javascript mantığı tetiklenmelidir.

Bu nedenle, Angular öğesinin belirtilen bir eylem özelliğine sahip olmadığı sürece varsayılan eylemi (sunucuya form gönderme) engeller.

Bir form gönderildiğinde hangi javascript yönteminin çağrılması gerektiğini belirtmek için aşağıdaki iki yoldan birini kullanabilirsiniz:

ngSubmit form öğesinde yönerge

ngClick ilk butona direktif veya tipte giriş alanı (input [type = submit])

İşleyicinin çifte çalışmasını önlemek için, ngSubmit veya ngClick direktiflerinden sadece birini kullanın.

Bunun nedeni, HTML belirtiminde aşağıdaki form gönderme kurallarıdır:

Bir formda sadece bir giriş alanı varsa, bu alana girme işlemi tetiklenir form gönderir (ngSubmit) Bir formda 2+ giriş alanı varsa ve hiçbir düğme yoksa veya input[type=submit] daha sonra enter tuşuna basma işlemi tetiklemez Bir formda bir veya daha fazla giriş alanı ve bir veya daha fazla düğme varsa veya input[type=submit] daha sonra, giriş alanlarından herhangi birine girme, ilk düğme üzerindeki tıklama işleyicisini tetikler veya input[type=submit] (ngClick) ve kapalı formdaki bir gönderici (ngSubmit).

Bekleyen bir form gönderildiğinde bekleyen tüm ngModelOptions değişiklikleri hemen gerçekleşecektir. Model güncellemeden önce ngClick etkinliklerinin gerçekleşeceğini unutmayın.

Güncelleştirilmiş modele erişmek için ngSubmit'i kullanın.

app.js:

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

Form:

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

Kaynak: AngularJS: API: form


5
2018-05-05 17:04