Angular Prüfungs-Felder in ein Formular einbauen.
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>
|