#

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>

 

 

Mobile

.

0123movie.net