AngularJs – Template driven Form Validierung

Downloads:

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>