自定义验证器角4
我在我的Angular 4项目中使用自定义验证器时,当我想更改密码我有一个弹出式2字段:密码和confirmpassword。 在这种情况下,这两个字段都是必需的,当用户删除某些字段的内容时,正确显示错误消息,字段变为红色。 但我怎么能进行实地无效的,如果密码不匹配(使红色字段等所需用NG-无效/有错误)自定义验证器角4
equalValidator.ts
import {Directive, forwardRef, Attribute} from '@angular/core';
import {Validator, AbstractControl, NG_VALIDATORS} from '@angular/forms';
@Directive({
selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
providers: [
{provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true}
]
})
export class EqualValidator implements Validator {
constructor(@Attribute('validateEqual') public validateEqual: string,
@Attribute('reverse') public reverse: string) {
console.log('Sono in validator')
}
private get isReverse() {
if (!this.reverse) return false;
return this.reverse === 'true' ? true : false;
}
validate(c: AbstractControl): {[key: string]: any} {
// self value
let v = c.value;
// control vlaue
let e = c.root.get(this.validateEqual);
// value not equal
if (e && v !== e.value && !this.isReverse) {
return {
validateEqual: false
}
}
// value equal and reverse
if (e && v === e.value && this.isReverse) {
delete e.errors['validateEqual'];
if (!Object.keys(e.errors).length) e.setErrors(null);
}
// value not equal and reverse
if (e && v !== e.value && this.isReverse) {
e.setErrors({
validateEqual: false
})
}
return null;
}
}
password.html
<form #modelForm="ngForm"> <div class="form-group">
<label for="">Password</label>
<input type="password" class="form-control" name="password" [ngModel]="password"
required validateEqual="confirmPassword" reverse="true" #password="ngModel">
<small [hidden]="password.valid || password.pristine" class="text-danger">
Password is required
</small>
</div>
<div class="form-group">
<label for="">Retype password</label>
<input type="password" class="form-control" name="confirmPassword" [ngModel]="confirmPassword"
required validateEqual="password" reverse="false" #confirmPassword="ngModel">
<small [hidden]="confirmPassword.valid || confirmPassword.pristine " class="text-danger">
Password mismatch
</small>
</div> </form> <p-footer> <div class="ui-dialog-buttonpane ui-helper-clearfix"> <button class="btn btn-success" (click)="updatePassword(modelForm, oldPassword.value, password.value, confirmPassword.value)" [disabled]="((modelForm.form.invalid || modelForm.form.pristine)|| (password.value != confirmPassword.value))"> <span class="btn-label"> <i class="material-icons">check</i> </span> {{'changepassword.buttons.update' |translate }} </button> </div>
使用反应形式
this.passwordForm = this.fb.group({
password: [ '', [ Validators.required] ],
passwordConfirm: [ '', Validators.required ]
}, { validator: this.areEqual });
这是我如何创建FormGroup。
private areEqual(group: FormGroup) {
return group.get('password').value === group.get('passwordConfirm').value ? null : { mismatch: true };
}
这是如何验证匹配
,然后在模板你可以使用
passwordForm?.errors?.mismatch
希望这将有助于
不匹配的消息已经是正确的,我想在密码不匹配时使字段无效,此时字段有效,如果输入了某些内容如果不匹配 – Alessandro
你可以使用ngClass
添加引导has-danger
类对于引导程序4,或者对于以前版本为has-error
,基于验证期间设置的属性。
我已经简化您的一些代码,以使实现更清晰:
<div class="form-group" [ngClass]="{'has-danger': passwordError}">
<label class="form-control-label">danger</label>
<input type="password" class="form-control" name="password"
required validateEqual="confirmPassword" reverse="true">
</div>
这里的工作plunkr全面实施:https://plnkr.co/edit/MbrFdbd8SVjAhQp3XOOY
似乎有错误从未应用于该字段也如果我使用true:“{'has-error':true}” – Alessandro
可能是您的引导版本 - 更新版本4类的答案,并显示它的plunkr在行动中。 – Steveland83
由于您使用的模板驱动的形式,你可以控制通过比较'password'和'confirmPassword'的值来隐藏不匹配的消息。 – Pengyy
@Pengyy我想在密码不匹配时将字段设为红色,例如当需要字段时 – Alessandro