In Angular werden die Eingabefelder direkt auf Gültigkeit geprüft, indem man einen Div-Bereich mit ngIf unterhalb des Eingabefeldes in der component.html einbaut.
Beispiel Code
Validierung in einem Angular Formular
Die Validierungsfelder werden dadurch direkt als sichtbar Div-Blöcke unterhalb der Eingabe angezeigt.
Man baut die Validation Felder direkt unterhalb des Eingabefeldes ein und verknüpft die Anzeige mit ngIf
Wichtig: die Prüfung erfolgt direkt in dem Formularfeld. Hierzu wird das Formularfeld mit einem #Tag benannt und für ngModel/Angular sichtbar gemacht.
also #formfield_project="ngModel"
in ngIf wird direkt das Formularfeld auf
·
.invalid
·
.dirty
·
.touched
·
.minlength
·
.required
ausgewertet
Beispiel Code
Validierung in einem Angular Formular
<mat-form-field style="width: 300px;"> <mat-label>project</mat-label> <input type="text" name="ctlproject" matInput [(ngModel)]="project" maxlength="50" minlength="3" required #formfield_project="ngModel"> </mat-form-field>
<div *ngIf="formfield_project.invalid && (formfield_project.dirty || formfield_project.touched)" class="alert alert-danger alert alert-danger alert_field"> <div *ngIf="formfield_project.errors.required" class="alert_field"> Project is required. </div> <div *ngIf="formfield_project.errors.minlength" class="alert_field"> min 3 characters is required. </div> </div> |