Wie man Validierungen auf submit oder blur für reaktive Formen von eckigen 4 anwenden?

Question

Ich arbeite an eckigen 4 Projekt. In dem verwendete ich reaktive Formen und Winkelvalidierungen. Alle Validierungsnachrichten werden im Fokus außerhalb des Felds angezeigt. Aber ich möchte auch Validierungsnachrichten auf der Schaltfläche "Senden" anzeigen. Html-Code:

<form [formGroup] = "addNewCustomerForm" (ngSubmit) = "submitAddNewCustomerForm()"> 
    <div class="form-group"> 
     <label>First Name</label> 
     <input class="form-control" [class.alert-border]="addNewCustomerForm.controls['first_name'].hasError('required') && addNewCustomerForm.controls['first_name'].touched" placeholder="Ex: James" formControlName="first_name"> 
    </div> 
    <small *ngIf="addNewCustomerForm.controls['first_name'].hasError('required') && addNewCustomerForm.controls['first_name'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid first name.</small> 
    <small *ngIf="addNewCustomerForm.controls['first_name'].hasError('pattern') && addNewCustomerForm.controls['first_name'].touched && !addNewCustomerForm.controls['first_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid first name.</small> 

    <div class="form-group"> 
     <label>Last Name</label> 
     <input class="form-control" [class.alert-border]="addNewCustomerForm.controls['last_name'].hasError('required') && addNewCustomerForm.controls['last_name'].touched" placeholder="Ex: Lee" formControlName="last_name"> 
    </div> 
    <small *ngIf="addNewCustomerForm.controls['last_name'].hasError('required') && addNewCustomerForm.controls['last_name'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small> 
    <small *ngIf="addNewCustomerForm.controls['last_name'].hasError('pattern') && addNewCustomerForm.controls['last_name'].touched && !addNewCustomerForm.controls['last_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small> 

    <div class="form-group"> 
     <label>Email Address</label> 
     <input class="form-control" [class.alert-border]="addNewCustomerForm.controls['email_id'].hasError('required') && addNewCustomerForm.controls['email_id'].touched" placeholder="Ex: example@xyz.com" formControlName="email_id" (focusin)="emailExist = false" (focusout)="checkEmailExistance($event)"> 
    </div> 
    <small *ngIf="addNewCustomerForm.controls['email_id'].hasError('required') && addNewCustomerForm.controls['email_id'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid email.</small> 
    <small *ngIf="addNewCustomerForm.controls['email_id'].hasError('pattern') && addNewCustomerForm.controls['email_id'].touched && !addNewCustomerForm.controls['email_id'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid email.</small> 
    <small *ngIf="emailExist" class="alert-error"><i class="material-icons">error</i> This email already exists. Please try with different email.</small> 
</form> 

ts Code:

this.addNewCustomerForm = this.formGroup.group({ 
     first_name   : [null, [Validators.required, Validators.pattern(this.regExpression)]], 
     last_name   : [null, [Validators.required, Validators.pattern(this.regExpression)]], 
     email_id   : [null, [Validators.required, Validators.pattern(this.emailPattern)]] }); 

submitAddNewCustomerForm(){ 
    if(this.addNewCustomerForm.valid) 
    { 
    console.log(this.addNewCustomerForm.value); 
    } 
} 

Answer 1

Nun haben Sie zwei Möglichkeiten,

One: - eine Boolesche Variable in Ihrer einreichen Funktion und true gesetzt den Fall, wenn Form ist ungültig und benutze das in der ngIf-Bedingung deines Fehlerblocks. Unten ist ein Beispiel für das gleiche.

submitAddNewCustomerForm(){ 
    if(this.addNewCustomerForm.invalid) 
    { 
     this.showError = true; 
    } 
    } 

Und in html Fehler

<small *ngIf="(showError || (addNewCustomerForm.controls['last_name'].hasError('pattern') && addNewCustomerForm.controls['last_name'].touched)) && !addNewCustomerForm.controls['last_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small> 

und die zweite Option markieren Sie jede Kontrolle verschmutzt durch

this.controlName.markAsDirty() 

oder durch

this.form.get('controlName').markAsDirty() 

Answer 2

Sie auch dies erreichen können mit der Form Direktive wie sho wn here

Für den eingereichten Teil, fügen Sie die Vorlage Bezug auf den Rest Sie Ihre Form haben:

<form .... #formDir="ngForm"> 

Dann können Sie einfach hinzufügen formDir.submitted auf Ihre if-Anweisungen, für die Unschärfe-Funktionalität Sie können einfach überprüfen, ob das Feld touched ist. Also für Ihre if Anweisung würde ich die tatsächliche Formularsteuerung einer Variablen zuweisen, so dass wir den Code verkürzen können, das ist natürlich nicht notwendig, aber für Lesbarkeit würde ich das tun und zum Beispiel eine Variable für first_name nach dem Aufbau der verwenden Form:

this.firstNameCtrl = this.addNewCustomerForm.get('first_name'); 

Dann in Ihrer Vorlage können Sie folgendes zu erreichen, was Sie wollen:

<small *ngIf="firstNameCtrl.hasError('required') && 
       (formDir.submitted || firstNameCtrl.touched) ">...</small>