使用angular io

时间:2017-06-07 06:25:22

标签: angular validation

我在控制台中已经成功,但它显示错误消息并在成功时显示提交按钮禁用。

请检查以下代码。

HTML代码

<div fxLayout="row" fxLayoutWrap="wrap">
    <md-input-container class="ml-xs mr-xs" style="width: 60%">
        <input mdInput placeholder="Email Address" maxlength="150"  [ngModel]="CompanyEdit.varEmail" [formControl]="formCompany.controls['varEmail']">

    </md-input-container>
    <small *ngIf="formCompany.controls['varEmail'].hasError('required') && formCompany.controls['varEmail'].touched" class="mat-text-warn">Please insert email address.</small>
    <small *ngIf="formCompany.controls['varEmail'].hasError('maxlength') && formCompany.controls['varEmail'].touched" class="mat-text-warn">Email address can not exceed 150 characters.</small>
    <small *ngIf="formCompany.controls['varEmail'].hasError('email') && formCompany.controls['varEmail'].touched" class="mat-text-warn">Please enter valid email address.</small>       
</div>
<div fxLayout="row" fxLayoutWrap="wrap">
    <md-input-container class="ml-xs mr-xs" style="width: 60%">
        <input mdInput placeholder="Personal Email Address" maxlength="150" [ngModel]="CompanyEdit.varPersonalEmail" [formControl]="formCompany.controls['varPersonalEmail']">

    </md-input-container>
    <small *ngIf="formCompany.controls['varPersonalEmail'].hasError('required') && formCompany.controls['varPersonalEmail'].touched" class="mat-text-warn">Please insert email address.</small>
    <small *ngIf="formCompany.controls['varPersonalEmail'].hasError('maxlength') && formCompany.controls['varPersonalEmail'].touched" class="mat-text-warn">Email address can not exceed 150 characters.</small>
    <small *ngIf="formCompany.controls['varPersonalEmail'].hasError('email') && formCompany.controls['varPersonalEmail'].touched" class="mat-text-warn">Please enter valid email address.</small>
    <small *ngIf="formCompany.controls['varPersonalEmail'].hasError('MatchPersonalEmail') && formCompany.controls['varPersonalEmail'].touched" class="mat-text-warn">Please enter unique personal email address than Email.</small>

</div>

组件文件,我导入验证文件password-validation.ts

import { EmailValidation } from '../../validation/password-validation';

this.formCompany = this.fb.group({
varEmail: [null, Validators.compose([Validators.required, Validators.maxLength(150), CustomValidators.email])],
        varPersonalEmail:[null,Validators.compose([Validators.required,Validators.maxLength(150),CustomValidators.email])],
}, {
      validator: EmailValidation.MatchPersonalEmail// your validation method

    });

Customvalidation.ts文件

import {AbstractControl} from '@angular/forms';
export class EmailValidation {
static MatchEmail(AC: AbstractControl) {
       let password = AC.get('varEmail').value; // to get value in input tag
       let confirmPassword = AC.get('varPersonalEmail').value; // to get value in input tag
        if(password == confirmPassword) {
            console.log('false');
            AC.get('varEmail').setErrors( {MatchEmail: true} )
        } else {
            console.log('true');    
            return null
        }
    } }

0 个答案:

没有答案