Question

这是问题，

我尝试构建一个＆＃34;自定义验证器＆＃34;用于使用angularJS v2的密码和电子邮件字段。遵循＆＃34;标准结构＆＃34;，我确实让这些文件一起交互：

/forms/form.component.ts
/validators/password.validator.ts
/validators/email.validator.ts

在我的表单组件模板中，我来到这两个相关领域：

//...
<input type="password" class="form-control" placeholder="password" [(ngModel)]="user.password" [formControl]="passwordCtrl" required />
<div *ngIf="passwordCtrl.dirty && passwordCtrl.hasError('validPassword')">PASSWORD NOT VALID</div>
//...
<input type="text" class="form-control" placeholder="email" [(ngModel)]="user.email" [formControl]="emailCtrl" required />
<div *ngIf="emailCtrl.dirty && emailCtrl.hasError('validemail')">EMAIL NOT VALID</div>
//...

而且，在组件（.ts）中我有这个：

//...
import { validateEmail } from '../validators/email.validator';
import { validatePassword } from '../validators/password.validator';
//...in constructor(fb: FormBuilder) : 
this.passwordCtrl = fb.control(this.user.password, Validators.compose([validatePassword])),
this.emailCtrl = fb.control(this.user.email, Validators.compose([validateEmail])),
//...

声明和实例在我的组件中是正确的。因为当我添加＆＃34; required＆＃34; ＆＃34;撰写中的验证者。＆＃34;部分，这很好。问题似乎来自验证器本身......以下是它们：

//email.validator.ts
import { FormControl } from '@angular/forms';
export function validateEmail(c: FormControl){
    let EMAIL_REGEXP = new RegExp(`([-!#-'*+/-9=?A-Z^-~]+(\.[-!#-'*+/-9=?A-Z^-~]+)*|"([]!#-[^-~ \t]|(\\[\t -~]))+")@[0-9A-Za-z]([0-9A-Za-z-]{0,61}[0-9A-Za-z])?(\.[0-9A-Za-z]([0-9A-Za-z-]{0,61}[0-9A-Za-z])?)+`);
    return EMAIL_REGEXP.test(c.value) ? null : {
        validateEmail: {
            validemail: false
        }
    };
}

//password.validator.ts
import { FormControl } from '@angular/forms';
export function validatePassword(c: FormControl) {
    let PASSWORD_REGEXP = new RegExp(`^.*(?=.{6,20})(?=.*\d)(?=.*[a-zA-Z]).*$`);
    return PASSWORD_REGEXP.test(c.value) ? null : {
        validatePassword: {
            validpassword: false
        }
    };
}

验证器＆＃34;示例＆＃34;来自那里：http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html

当我更改＆＃34; validpassword＆＃34;或＆＃34; validemail＆＃34;返回值（true，false，等等）。 div取决于validateemail，validatepassword验证器，从不出现......

感谢您阅读/帮助

更新1：

我的表单用于处理LOGIN和REGISTER的可能性。因此，有两种形式，一种是默认显示，另一种是单击＆＃34;注册＆＃34;链接。但它们位于同一页面上。

在我的form.component.ts中，我创建了2个formGroups：

//...
this.loginForm = fb.group({
    login: this.loginCtrl,
    password: this.passwordCtrl
}),
this.registerForm = fb.group({
    login: this.loginCtrl,
    password: this.passwordCtrl,
    email: this.emailCtrl
});

因此，两种不同的形式与特定的formGroup相关。我在这样的模板中绑定它们（并添加要提交的按钮）：

//...
<form (ngSubmit)="register()" [formGroup]="registerForm">
//...
<button class="btn btn-default submit" [disabled]="!registerForm.valid">Submit</button>
//...
//...
<form (ngSubmit)="login()" [formGroup]="loginForm">
//...
<button class="btn btn-default submit" [disabled]="!loginForm.valid">Login</button>

当所有字段都完成时，两个按钮都保持禁用状态。意思是：如果＆＃34; registerForm＆＃34;中的电子邮件字段为空组，然后是＆＃34;登录按钮＆＃34;在＆＃34; loginForm＆＃34;小组一直禁用！

FormGroup＆＃34; ING＆＃34;不应该处理这些案件吗？

Answer 1

主要问题 - 而不是hasError('validemail')使用此：hasError('validateEmail') - 这是您从验证程序返回的错误对象的属性。

更新1：用于表单组件FormControl的新实例。

this.loginFormLoginCtrl = new FormControl('', Validators.required);
this.loginFormPasswordCtrl = new FormControl('', Validators.required);
this.registerFormLoginCtrl = new FormControl('', Validators.required);
this.registerFormPasswordCtrl = new FormControl('', Validators.required);
this.registerFormLoginCtrl = new FormControl('', Validators.required);

    ....
this.loginForm = fb.group({
     login: this.loginFormLoginCtrl,
     password: this.loginFormPasswordCtrl
});
this.registerForm = fb.group({
     login: this.registerFormLoginCtrl,
     password: this.registerFormPasswordCtrl,
     email: this.registerFormEmailCtrl
});

带有regexp的AngularJS 2.2.4自定义验证器

1 个答案: