如何在按钮提交时验证表单

Question

我有一个表单，一旦控件获得 class 从 ng-untouched ng-pristine ng-invalid 到 的更改，它就会得到验证]ng-pristine ng-invalid ng-touched 但如果我有一个带有更多控件的表单，那么我希望用户知道哪个字段 he/she 错过了提交按钮。我怎样才能使用 angularJS2 做到这一点。我已经使用 ReactiveFormsModule 来验证控件

下面是我的代码：component

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 }
            }
        }
    }
}

以下是我的代码：module

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>

我想将所有无效控件 class 更新为 ng-untouched ng-pristine ng-invalid 但不确定这是否是正确的方法

Answer 1

Angular 表单不提供指定何时进行验证的方法。

只需在提交表单时将标志设置为 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;
  }
}

如何在按钮提交时验证表单

How to validate a form on button submit

validation

angular

angular-reactive-forms