代码之家 › 专栏 › 技术社区 › AbhiRam

我们如何在角度上显示一个接一个的表单错误验证

angular2-form-validation angular

AbhiRam · 技术社区 · 6 年前

我是Angular的新手,我创建了一个自定义的emailDomainError验证器类,它工作正常。

但问题是电子邮件域错误和电子邮件验证错误消息一起显示,我如何解决这个问题我真的很困惑,有人能帮我吗?

我想我必须在我的emailDomainError类中检查电子邮件模式是否正确。我该如何检查?如果我认为正确的方式和我的完整代码--- https://stackblitz.com/edit/angular-bvihqj

恩贡尼特

 ngOnInit() {

    this.employeeForm = this.fb.group({
      fullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(10)]],
      contactPreference: ['email'],
      email: ['', [Validators.required, Validators.email, emailDomainError]],
      phone: [''],
      skills: this.fb.group({
        skillName: ['', [Validators.required]],
        experienceInYears: ['', [Validators.required]],
        proficiency: ['', [Validators.required]]
      })
    });

此对象包含此表单的所有验证消息

 formErrors = {
    'fullName': '',
    'email': '',
    'phone': '',
    'skillName': '',
    'experienceInYears': '',
    'proficiency': ''
  };


     validationMessages = {
        'fullName': {
          'required': 'Full Name is required.',
          'minlength': 'Full Name must be greater than 2 characters.',
          'maxlength': 'Full Name must be less than 10 characters.'
        },
        'email': {
          'required': 'Email is required.',
          'email': 'Valid Email id is required.',
          'emailDomainError': 'Email domain should be karvy.com'
        },
        'phone': {
          'required': 'Phone number is required.'
        },
        'skillName': {
          'required': 'Skill Name is required.',
        },
        'experienceInYears': {
          'required': 'Experience is required.',
        },
        'proficiency': {
          'required': 'Proficiency is required.',
        },
      };

电子邮件域错误

function emailDomainError(control: AbstractControl): { [key: string]: any } | null {
  const email: string = control.value;
  const domain: string = email.substring(email.lastIndexOf("@") + 1);
  if (email === '' || domain === "karvy.com") {
    return null;
  } else {
    return { "emailDomainError": true };
  }
}

1 回复 | 直到 6 年前

harkesh kumar 6 年前

嗨,Abhiram,我更新了你的代码,这里是链接 Here

在表单组中,更新如下

email: ['', [Validators.required, emailError, emailDomainError]],

功能代码更改如下 *

*
 * emailDomainValidations
 * @param control 
 */

function emailDomainError(control: AbstractControl): { [key: string]: any } | null {
  const email: string = control.value;
  if (email && email.indexOf("@") != -1) {
    let [_, domain] = email.split("@");
    if (domain !== "karvy.com") {
      return {
        "emailDomainError": true,
       // "email": false
      };
    }

    else {
      return null;
    }
  }
}
function emailError(control: AbstractControl): { [key: string]: any } | null {
  const email: string = control.value;

  if( email.length <3 && email.length >=1){
    return { "email" : true}
  }
  else{
    return null;
  }

}