AngularJs – Template driven Form Validierung

Tutorial AngularJs

von Ardian Shala, 09.01.2017 - update: 19.05.2017
Template driven Forms Validierung via ng-form erfordern nicht zwingend Controller Code.
Somit lassen sich Validierungs-Fehler schnell im HTML definieren.
Vorraussetzung:
  • Angular 1.5.x - link
  • Editor

Downloads:

Beispiel

ng-form integrieren

Über die Directive „ng-form“ lassen sich Form-Controls gruppieren. ng-form ist hierbei kein Ersatz für das Tag „form“.

<div ng-form name="form">

„name“ Attribut dem Input zuordnen

Durch das Setzen des „name“ Attribut wird das Form-Control dem form hinzugefügt.

<input class="form-control" name="name" ng-model="vm.name" type="text" required />

Nachricht für den Error Fall anzeigen

Hier reagieren wir auf den Error-Fall „requried“ via „form.name.$error.required“.
Beim Klicken des Buttons wird „vm.submitted“ auf true gesendet.
Falls nun das Input leer sein sollte, wird der Fehler „Name nicht ausgefüllt!“ angezeigt.

<div class="text-danger" ng-show="vm.submitted && form.name.$error.required">
    Name nicht ausgefüllt!
</div>
<a class="btn btn-primary" ng-click="submitted=true;vm.save()">absenden</a>

Kompletter Form Code

<div ng-form name="form">
    <div class="form-group m-t">
        <label for="name">Name</label>
        <input class="form-control" name="name" ng-model="vm.name" type="text" required />
        <div class="text-danger" ng-show="submitted && form.name.$error.required">
            Name nicht ausgefüllt!
        </div>
    </div>

    <a class="btn btn-primary" ng-click="submitted=true;vm.save()">absenden</a>

</div>
#angularjs #Forms #formvalidierung #spa

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien. Full Stack Entwickler mit AngularJs, Angular, Ionic und C#.