确认验证指令在角度6中不起作用？
确认验证指令在角度6中不起作用？
提问于 2018-09-17 05:07:08
我正在尝试使用角度6中驱动的模板验证确认密码。
我写了自定义指令来检查密码和确认密码，但它无法正常工作。
自定义指令选择器“appConfirmEqualValidator”，我用它作为确认密码输入元素的属性。
获取密码值我使用像确认密码输入元素中的appConfirmEqualValidator =“password”
如果密码匹配，它将返回null，否则将返回notEqual：true
注册组件html
<form class="form" #userRegistration="ngForm" (ngSubmit)="userRegistrationForm(userRegistration)">
<div class="form-group">
<label for="userName">Name</label>
<input type="text" class="form-control" id="userName" required [(ngModel)]="user.name" #name="ngModel" name="name" [ngClass]="{'is-invalid': userRegistration.submitted && name.invalid}"/>
<div *ngIf="userRegistration.submitted && name.invalid" class="invalid-feedback">
<div *ngIf="name.errors.required">Name is mandatory</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" required [(ngModel)]="user.password" #password="ngModel" name="password" [ngClass]="{'is-invalid': userRegistration.submitted && password.invalid}"/>
<div *ngIf="userRegistration.submitted && password.invalid" class="invalid-feedback">
<div *ngIf="password.errors.required">Password Mandatory</div>
</div>
</div>
<div class="form-group">
<label for="cpassword">Confirm Password</label>
<input type="password" class="form-control" id="cpassword" required appConfirmEqualValidator="password" [(ngModel)]="user.cpassword" #cpassword="ngModel" name="cpassword" [ngClass]="{'is-invalid': userRegistration.submitted && cpassword.invalid}"/>
<div *ngIf="userRegistration.submitted && cpassword.invalid" class="invalid-feedback">
<div *ngIf="cpassword.errors.required">Password Mandatory</div>
<div *ngIf="cpassword.errors.notEqual">Password Does not match</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</form>
注册comopnet ts
import { Component, OnInit } from '@angular/core';
import { UserRegisterService } from '../../services/user-register.service';
import { ConfirmEqualValidatorDirective } from '../../shared/confirm-equal-validator.directive';
import { Product } from '../../models/product';
import { NgForm } from '@angular/forms';
import { User } from '../../models/user';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
user: User;
products: Product;
constructor(private userRegister: UserRegisterService) {
this.user = new User();
}
ngOnInit() {
}
userRegistrationForm(userRegistration: NgForm) {
if(userRegistration.valid) {
this.userRegister.registerUser(this.user);
} else {
alert("Unsuccessful!!!");
}
}
}
自定义指令ts
import { Validator, NG_VALIDATORS, AbstractControl } from '@angular/forms';
import { Directive, Input } from '@angular/core';
@Directive ({
selector: '[appConfirmEqualValidator]',
providers: [{
provide: NG_VALIDATORS,
useExisting: ConfirmEqualValidatorDirective,
multi: true
}]
})
export class ConfirmEqualValidatorDirective implements Validator {
@Input() appConfirmEqualValidator: string;
validate(control: AbstractControl): {[key:string]: any} | null {
const controlToCompare =
control.parent.get(this.appConfirmEqualValidator);
if(controlToCompare && controlToCompare.value !== control.value) {
return {'notEqual': true}
}
return null;
}
}
回答 1
Stack Overflow用户
发布于 2018-09-17 14:11:13
前几天我遇到了完全相同的问题而不是等于而不是等于结账我的验证器在https://stackblitz.com/edit/angular-cfexiy
问题涉及如何在将值与变化进行比较时触发Angular验证指令进行更新？
您需要观看更改跟踪
import { Directive, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
import { ValidatorBase } from './validator-base';
@Directive({
selector: '[notEqual]',
providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => NotEqualDirective), multi: true }]
})
export class NotEqualDirective extends ValidatorBase implements Validator, OnChanges {
@Input()
notEqual: string;
constructor() {
super('notEqual');
}
validate(c: AbstractControl): { [key: string]: any } {
if (c.value && c.value === this.notEqual) {
return {
notEqual: true
};
}
return null;
}
}
// The base class that implements change tracking
import { SimpleChanges, OnChanges } from '@angular/core';
export class ValidatorBase implements OnChanges {
inputNames: string[];
onChange: () => void;
constructor(name: string | string[]) {
if (typeof name === 'string') {
this.inputNames = [name];
} else {
this.inputNames = name;
}
}
ngOnChanges(changes: SimpleChanges): void {
if (this.inputNames.find(name => name in changes)) {
if (this.onChange) this.onChange();
}
}
registerOnValidatorChange(fn: () => void): void {
this.onChange = fn;
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100002646
复制相关文章
相似问题