Angular 2 Überprüfung des benutzerdefinierten Formulars funktioniert erst, nachdem der Benutzer den Textbox-Wert gelöscht hat

Question

Ich versuche, mein Eingabefeld sofort zu validieren, nachdem das Eingabefeld unscharf geworden ist. Aber einige, wie die Validierung Nachricht erscheint nur, wenn ich etwas in ein Textfeld schreiben und dann löschen.

Hier ist meine HTML-Vorlage;

<input type="text" 
 
placeholder="First Name" 
 
class="form-control" 
 
name="firstName" 
 
id="firstName"          
 
[ngModel]="typeValidation.firstName" 
 
#firstName="ngModel" 
 
(blur)="firstNameBlur(firstName.value)" 
 
autofocus 
 
required> 
 
              
 
<small [hidden]="firstName.valid || (firstName.pristine && !f2.submitted)" class="text-danger"> 
 
    First Name is required. 
 
</small>

Hier ist meine Typoskript;

firstNameBlur(value:string) { 

    if (value == "" || value == undefined) { 
     return false; 
    } 
    else { 
     return true; 
    } 

} 

Bitte helfen Sie mir. Vielen Dank im Voraus!

Answer 1

Um es wie erwartet arbeiten, können Sie untouched statt pristine, wie diese verwendet werden soll:

<small [hidden]="firstName.valid || (firstName.untouched && !f2.submitted)" 
     class="text-danger"> 
    First Name is required. 
</small> 

oder mit * ngIf (IMHO, ist es wirklich besser):

<small *ngIf="firstName.invalid && (firstName.touched || f2.submitted)" 
     class="text-danger"> 
    First Name is required. 
</small> 

WORKING DEMO

Beachten Sie, dass Sie (blur) nicht benötigen.

Answer 2

Ich bin mir nicht sicher, warum Sie an das Blur Event gebunden sind? Das erforderliche Attribut sollte dazu führen, dass Angular das erforderliche Feld automatisch überprüft, wenn der Benutzer das Feld verlässt.

Und was macht dieser Code? Da die firstNameBlur() auf ein Ereignis ausgeführt wird ... die Rückgabe von false setzt preventDefault. (Siehe diesen Link: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) Ist das was beabsichtigt?

Versuchen Sie, das Blur-Ereignis zu entfernen und sehen Sie, ob es ohne es funktioniert. Wenn dies der Fall ist, benötigen Sie die firstNameBlur-Methode nicht.