Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular Prüfungs-Felder in ein Formular einbauen.

09.02.2021 (👁5293)


 

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>