Как проверить форму на кнопке отправить

Question

У меня есть форма, которая становится подтверждена как только управление получает изменение класса от нг-нетронутые нг-нетронутые нг-инвалид до нг-нетронутых нг-инвалид нг-прикоснулся, но если у меня есть форма с большим количеством элементов управления, я хочу, чтобы пользователь знал, какое поле он пропустил на кнопку submit. как я могу это сделать, используя angularJS2. Я использовал ReactiveFormsModule для проверки элементов управления

Ниже мой код: компонента

import { Component } from '@angular/core'; 
import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms'; 

@Component({ 
    selector: 'page', 
    templateUrl:'../app/template.html' 
}) 
export class AppComponent { 
    registrationForm: FormGroup; 
    constructor(private fb: FormBuilder) { 
     this.registrationForm = fb.group({ 
      username: ['', [Validators.required, Validators.minLength(4)]], 
      emailId: ['', [Validators.required, this.emailValidator]], 
      phonenumber: ['', [Validators.required, this.phoneValidation]]   
     }) 
    } 

    emailValidator(control: FormControl): { [key: string]: any } { 
     var emailRegexp = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i; 
     if (control.value && !emailRegexp.test(control.value)) { 
      return { invalidEmail: true }; 
     } 
    } 
    phoneValidation(control: FormControl) { 
     if (control['touched'] && control['_value'] != '') { 
      if (!/^[1-9][0-9]{10}$/.test(control['_value'])) { 
       return { 'invalidPhone': true } 
      } 
     } 
    } 
} 

Ниже мой код: модуля

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ReactiveFormsModule } from '@angular/forms'; 

import { AppComponent } from '../app/component'; 
@NgModule({ 
    imports: [BrowserModule, ReactiveFormsModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Ниже мой код: template

<form [formGroup]="registrationForm" (ngSubmit)="registrationForm.valid && submitRegistration(registrationForm.value)"> 
    <input type="text" formControlName="username" placeholder="username" /> 
    <div class='form-text error' *ngIf="registrationForm.controls.username.touched"> 
     <div *ngIf="registrationForm.controls.username.hasError('required')">Username is required.</div> 

    </div> 
    <br /> 
    <input type="text" formControlName="emailId" placeholder="emailId" /> 
    <div class='form-text error' *ngIf="registrationForm.controls.emailId.touched"> 
     <div *ngIf="registrationForm.controls.emailId.hasError('required')">email id is required.</div> 
     <div *ngIf="registrationForm.controls.emailId.hasError('invalidEmail')"> 
      Email is not in correct format. 
     </div> 
    </div> 
    <br /> 
    <input type="text" formControlName="phonenumber" placeholder="phonenumber" /> 
    <div class='form-text error' *ngIf="registrationForm.controls.phonenumber.touched"> 
     <div *ngIf="registrationForm.controls.phonenumber.hasError('required')">phone number is required.</div>  
     <div *ngIf="registrationForm.controls.phonenumber.hasError('invalidPhone')">Invalid phone number.</div> 
    </div> 
    <br /> 
    <input type="submit" value="Submit" /> 
</form> 

Я думал об обновлении всех класс недействительных элементов управления для нг-нетронутым нг-нетронутые нг-инвалида, но не уверен, что это правильный подход

Answer 1

Угловые формы не обеспечивают способы задания, когда делать Проверка.

Просто установите флаг на true, когда форма отправлена, и покажите предупреждения проверки только тогда, когда флаг равен true, используя *ngIf="flag" или аналогичный.

<form [formGroup]="registrationForm" (ngSubmit)="submitRegistration(registrationForm.value)"> 

<div *ngIf="showValidation> validation errors here </div> 

showValidation:boolean = false; 

submitRegistration() { 
    if(this.registrationForm.status == 'VALID') { 
    this.processForm(); 
    } else { 
    this.showValidation = true; 
    } 
}