cachaito
10/30/2014 - 12:15 PM

Walidacja formularzy

Kilka ciekawostek nt. walidacji formularzy w Angularze. Trick z submitted pochodzi z: http://jsfiddle.net/thomporter/ANxmv/2/

<!--
 - objekt błędów formularza tworzony jest z nazwy formularza!
 - podobnie odwołania do błędów pochodzą z nazw inputów np. customForm.clusterNodes.$error
 - dobrzej jest nie korzystać z przeglądarkowej walidacji (novalidate)
 - na formularzach ng-submit oraz ng-click muszą być wywołaniami f-cji
 - najlepiej rozdzielić ng-model z atrybutem 'name' formularza
-->

<form ng-submit="createCluster()" name="customForm" novalidate>
  <input ng-model="cluster.datanodes" type="number" name="clusterNodes" required>
  <span ng-show="submitted && customForm.clusterNodes.$error.required">Error!</span>
  <input ng-click="submitted = true" class="btn btn-primary" type="submit" value="Create">
</form>
  
<!-- 
 - aby uniknąć pokazywania błędu required z automatu ng-click wprowadza sprytnie dodatkową wartość sumbitted po kliknięciu
-->