gpt4 book ai didi

javascript - Angular 2自定义验证器如何设置control.valid true?

转载 作者:行者123 更新时间:2023-11-27 23:05:36 24 4
gpt4 key购买 nike

我有这样的自定义验证器:

static isEmail(control:Control):{[key:string]:boolean} {
let emailRegExp = new RegExp("^[-a-z0-9~!$%^&*_=+}{'?]+(.[-a-z0-9~!$%^&*_=+}{'?]+)*@([a-z0-9_][-a-z0-9_]*(.[-a-z0-9_]+)*.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}))(:[0-9]{1,5})?$", 'i');
if (control.value.match(emailRegExp)) {
return {isEmail: true};
}
return {isEmail: false};
}

在组件中使用它:

loginForm:ControlGroup;

constructor(private _router:Router,
private _loginService:LoginService,
private _formBuilder:FormBuilder) {
this.loginForm = _formBuilder.group({
email: ['', Validators.compose([
Validators.required,
Validators.minLength(8),
FormValidationService.isEmail
])],
password: ['', Validators.compose([
Validators.required,
Validators.minLength(8),
Validators.maxLength(30),
FormValidationService.isPassword
])]
});
}

和模板:

 <form id="login-form" role="form" [ngFormModel]="loginForm" (ngSubmit)="onLoginSubmit()">
<div class="form-group">
<label class="control-label" for="loginFormEmail">Email</label>
<input type="text" id="loginFormEmail" class="form-control"
ngControl="email" #email="ngForm">
<div *ngIf="email.dirty && !email.valid">
<div class="alert alert-danger" role="alert" [hidden]="!email.errors.minlength">
Email field must have more then 8 characters
</div>
<div class="alert alert-danger" role="alert" [hidden]="email.errors.isEmail">
Email not valid
</div>
</div>
</div>
<div class="form-group">
<label class="control-label" for="loginFormPassword">Password</label>
<input type="password" id="loginFormPassword" class="form-control"
ngControl="password" #password="ngForm">
<div *ngIf="password.dirty && !password.valid">
<div class="alert alert-danger" role="alert" [hidden]="!password.errors.minlength">
Password field must have more then 8 characters
</div>
<div class="alert alert-danger" role="alert" [hidden]="!password.errors.maxlength">
Password field must have no more then 30 characters
</div>
<div class="alert alert-danger" role="alert" [hidden]="password.errors.isPassword">
Password must meet the following rules:
<ul>
<li>At least one upper case english letter</li>
<li>At least one lower case english letter</li>
<li>At least one digit</li>
<li>At least one special character</li>
</ul>
</div>
</div>
</div>
<p>If you forgot your password you can <a (click)="toForgot()">reset it</a>.</p>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" [disabled]="!loginForm.valid">Login</button>
</div>
</form>

如果您查看屏幕截图,您可以看到自定义验证器返回我的值。但无论其值如何,control.valid 始终为 false,因此表单无效。

enter image description here

我尝试设置control.valid = true,但该字段只有getter。

最佳答案

我找到了答案。当控制值有效时,您必须在自定义验证器中返回 null:

static isPassword(control:Control):{[key:string]:boolean} {
let passwordRegExp = new RegExp("^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$");
if (control.value.match(passwordRegExp)) {
return null;
}
return {isPassword: false};
}

关于javascript - Angular 2自定义验证器如何设置control.valid true?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36619927/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com