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

Angularjs'de çok yeniyim. Uygulamamın bir formu olduğunu varsayalım. Denetçiyi kullanarak, angularjs formun geçersiz olduğunu düşünürse, forma ng-geçersiz bir sınıf eklediğini fark ettim. Güzel.

Görünüşe göre formun geçerli olup olmadığını kontrol etmek için kodumu Jquery seçici ile kirletmem gerekiyor ?! Bir form denetleyicisi kullanmadan form geçerliliğini göstermenin angularjs yolu nedir?

Eğer koyduğunuzda <form>içinizde ngApp etiketi, angularjs otomatik form kontroller (aslında adı verilen bir direktif vardır ekler formnessesary davranışı ekleyin). Name özniteliğinin değeri, kapsamınıza bağlı olacaktır; bu yüzden <form name="yourformname">...</form>tatmin edecek bir şey :

Bir form, FormController'ın bir örneğidir. Form örneği isteğe bağlı olarak name özniteliği kullanılarak kapsamda yayınlanabilir.

Dolayısıyla, form geçerliliğini kontrol etmek $scope.yourformname.$validiçin kapsam özelliğinin değerini kontrol edebilirsiniz .

Formlar hakkında Geliştirici Kılavuzu bölümünde daha fazla bilgi edinebilirsiniz .

Misal

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

Ayrıca kullanabilirsin myform.$invalid

Örneğin

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

form

• FormController'ı somutlaştıran modül ng Direktifi.

Name özniteliği belirtilirse, form denetleyicisi bu ad altında geçerli kapsamda yayınlanır.

Takma ad: ngForm

Angular'da formlar yuvalanabilir. Bu, dış formun tüm alt 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 Angular, aynı şekilde davranan ancak iç içe geçebilen ngForm yönergesini sağlar. Bu, ngRepeat yönergesi kullanılarak dinamik olarak oluşturulan formlarda Angular doğrulama yönergelerini kullanırken çok yararlı olan iç içe geçmiş formlara sahip olmanızı sağlar. Enterpolasyon kullanarak girdi öğelerinin name özniteliğini dinamik olarak oluşturamayacağınız için, yinelenen her girdi kümesini bir ngForm yönergesine sarmanız ve bunları bir dış biçim öğesinin içine yerleştirmeniz gerekir.

CSS sınıfları

ng-valid , form geçerliyse ayarlanır.

Form geçersizse ng-invalid ayarlanır.

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

Form kirliyse ng-dirty ayarlanır.

ng-gönderildi , form gönderildiyse ayarlanır.

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

Form gönderme ve varsayılan eylemi engelleme

İstemci tarafı Angular uygulamalarında formların rolü klasik gidiş-dönüş uygulamalarından farklı olduğundan, tarayıcının form gönderimini, verileri sunucuya gönderen tam sayfa yeniden yüklemeye dönüştürmemesi istenir. Bunun yerine, form gönderimini uygulamaya özel bir şekilde ele almak için bazı javascript mantığı tetiklenmelidir.

Bu nedenle, Angular, öğenin bir eylem özelliği belirtilmediği sürece varsayılan eylemi (sunucuya form gönderimi) 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:

Form öğesiyle ilgili ngSubmit yönergesi

İlk düğmedeki ngClick yönergesi veya gönder türünün girdi alanı (girdi [tür = gönder])

İşleyicinin iki kez yürütülmesini önlemek için ngSubmit veya ngClick direktiflerinden yalnızca birini kullanın.

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

Bir formda yalnızca bir giriş alanı varsa, bu alana enter tuşuna basmak, formda 2'den fazla giriş alanı varsa ve düğme yoksa form göndermeyi (ngSubmit) tetikler veya input[type=submit]bir formda bir veya daha fazla giriş alanı varsa enter tuşuna basmak gönder'i tetiklemez bir veya daha fazla düğme veya input[type=submit]giriş alanlarından herhangi birine basmak, ilk düğmedeki veya input[type=submit](ngClick) tıklama işleyicisini ve ekli formdaki (ngSubmit) bir gönderme işleyicisini tetikleyecektir.

Bekleyen tüm ngModelOptions değişiklikleri, ekli bir form gönderildiğinde hemen gerçekleşir. NgClick olaylarının model güncellenmeden önce gerçekleşeceğini unutmayın.

Güncellenen 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