11_AngularJs_Validations

Merhaba arkadaşlar, bu yazımda AngularJS de Validations konusunu anlatacağım.

Angular, form durumunu ve giriş denetimlerini döndüren özellikleri içerir. Form ve kontrol durumu, kullanıcının etkileşim ve doğrulama hatalarına bağlı olarak değişir. Bu yerleşik özelliklere, form adı veya giriş kontrol adı kullanılarak erişilebilir.

Form durumunu kontrol etmek için formName.propertyName ögesini ve giriş denetiminin durumunu denetlemek için formName.inputFieldName.propertyName ögesini kullanırız.

Aşağıdaki tabloda durum özellikleri listelenmiştir:

Özellik(Property)	Açıklama
$error	$error nesnesi belirtilen elemana uygulanan tüm doğrulama niteliklerini içerir
$pristine	Kullanıcı kontrolle etkileşime girmediyse, ancak false değerini döndürürse true değerini döndürür.
$valid	Model geçerliyse true değerini döndürür.
$invalid	Model geçersizse true değerini döndürür.
$dirty	Kullanıcı modelin değerini en az bir kez değiştirdiyse true değerini döndürür.
$touched	Kullanıcı kontrolden çıktıysa true değerini döndürür.
$untouched	Kullanıcı kontrolden çıkarılmadıysa true değerini döndürür.

Şimdi örnek üzerinden konuyu anlamaya çalışalım.

İndex.html

<form name="userForm" ng-submit="kaydet(userForm.$valid)" novalidate>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="name">Name</label>
          <input type="text" class="form-control" name="name" placeholder="Name" ng-model="name" required>
          <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">İsim alanı zorunlu.</p>
        </div>
        <div class="form-group col-md-6">
          <label for="email">Email</label>
          <input type="email" class="form-control" name="email" placeholder="Email" ng-model="email" required>
          <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Geçerli bir email değil.</p>
        </div>
      </div>
      <div class="form-group">
        <label for="inputAddress">Address</label>
        <input type="text" class="form-control" id="inputAddress" name="address" ng-minlength="3" placeholder="1234 Main St" ng-model="address">
        <p ng-show="userForm.address.$error.minlength" class="alert alert-danger">Address Error MinLength</p>
      </div>
      <div class="form-group">
        <label for="inputAddress2">Address 2</label>
        <input type="text" class="form-control" name="address2" id="inputAddress2" placeholder="Apartment, studio, or floor" ng-maxlength="5" ng-model="address2">
        <p ng-show="userForm.address2.$error.maxlength" class="alert alert-danger">Address MaxLength Error</p>
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCity">City</label>
          <input type="text" class="form-control" id="inputCity" ng-model="city">
        </div>
        <div class="form-group col-md-4">
          <label for="inputState">State</label>
          <select id="inputState" class="form-control" ng-model="state">
            <option selected>Choose...</option>
            <option>...</option>
          </select>
        </div>
        <div class="form-group col-md-2">
          <label for="inputZip">Zip</label>
          <input type="text" class="form-control" id="inputZip" ng-model="zip">
        </div>
      </div>
      <div class="form-group">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck">
          <label class="form-check-label" for="gridCheck">
            Check me out
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Kaydet</button>
    </form>

<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">İsim alanı zorunlu.</p>

</div>

<label for="email">Email</label>

<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Geçerli bir email değil.</p>

</div>

<label for="inputAddress">Address</label>

<p ng-show="userForm.address.$error.minlength" class="alert alert-danger">Address Error MinLength</p>

</div>

<label for="inputAddress2">Address 2</label>

<p ng-show="userForm.address2.$error.maxlength" class="alert alert-danger">Address MaxLength Error</p>

</div>

</div>

<label for="inputState">State</label>

<option selected>Choose...</option>

</select>

</div>

</div>

Check me out

</label>

</div>

<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Kaydet</button>

</form>

App.js

var app=angular.module('App',[]);
app.controller('AppController',['$scope',function($scope){
$scope.kaydet=function(isValid){
  if(isValid){
    alert("Form tamamen doğru")
  }
}}]);

var app=angular.module('App',[]);

app.controller('AppController',['$scope',function($scope){

$scope.kaydet=function(isValid){

if(isValid){

alert("Form tamamen doğru")

}

}}]);

Bu yazımı burada bitiriyorum. Diğer yazılarımda görüşmek üzere…

Bir cevap yazın Cevabı iptal et