반응형
반복 암호를 확인하는 Angular 2 양식
유효성 검사기의 필드를 angular2와 비교하는 것과 관련된 이 질문을 참조하십시오 . 불행히도 Angular 2는 솔루션이 더 이상 작동하지 않도록 약간 변경되었습니다. 내 코드는 다음과 같습니다.
import {IonicApp,Page,NavController,NavParams} from 'ionic/ionic'
import {Component} from 'angular2/core'
import {FORM_PROVIDERS, FormBuilder, Validators} from 'angular2/common'
import {ControlMessages} from '../../components/control-messages'
import {ValidationService} from '../../services/validation-service'
@Page({
templateUrl: 'build/pages/account/register.html',
directives: [ControlMessages]
})
export class RegisterPage {
constructor(nav:NavController,private builder: FormBuilder) {
this.nav = nav
this.registerForm = this.builder.group({
'name' : ['', Validators.required],
'email' : ['',Validators.compose([Validators.required, ValidationService.emailValidator])],
'password' : ['',Validators.required],
'repeat' : ['',this.customValidator]
}
)
}
register() {
alert(this.registerForm.value.password)
}
private customValidator(control) {
//console.log(this.registerForm.value.password)
//return {isEqual: control.value === this.registerForm.value.password}
return true
}
}
내 HTML :
<ion-content class="account">
<ion-list padding>
<form [ngFormModel]='registerForm' (submit)='register()'>
<div class="centered">
<img class="logo" src="img/logo.png" alt="">
</div>
<div class="spacer" style="height: 20px;"></div>
<ion-input>
<ion-label floating>Name</ion-label>
<input type="text" ngControl='name' id='name'>
<control-messages control="name"></control-messages>
</ion-input>
<ion-input>
<ion-label floating>Email</ion-label>
<input type="email" ngControl='email' id='email'>
<control-messages control="email"></control-messages>
</ion-input>
<ion-input>
<ion-label floating>Password</ion-label>
<input type="password" ngControl='password' id='password' value="">
<control-messages control="password"></control-messages>
</ion-input>
<ion-input>
<ion-label floating>Confirm Password</ion-label>
<input type="password" ngControl='repeat' id='repeat'>
<control-messages control="repeat"></control-messages>
</ion-input>
<button class="calm" full type='submit' [disabled]='!registerForm.valid'>Register</button>
<ion-item style="background-color:transparent;border:none;">
<button class="text-button" clear item-right (click)="gotoLogin()">Have an account already, Login</button>
</ion-item>
</form>
</ion-list>
</ion-content>
하지만 안타깝게도 유효성 검사 기능에서 '비밀번호'값에 액세스 할 수 없습니다. console.log (this.registerForm.value.password) 주석을 제거 하면 다음 오류 메시지가 나타납니다.
예외 : TypeError : 정의되지 않은 'value'속성을 읽을 수 없습니다.
어떤 생각? 감사.
코드에 몇 가지 문제가 있습니다. this유효성 검사기 함수에서 키워드 를 사용하려고하는데 이는 구성 요소의 인스턴스와 일치하지 않습니다. 유효성 검사 기능으로 설정할 때 함수를 참조하기 때문입니다.
또한 컨트롤과 관련된 값은 value속성 에서 도달 할 수 있습니다 .
즉, 두 필드를 함께 유효성을 검사하는 올바른 방법은 그룹을 만들고 그 안에 유효성 검사기를 연결하는 것입니다.
import { FormBuilder, Validators } from '@angular/forms';
...
constructor(private fb: FormBuilder) { // <--- inject FormBuilder
this.createForm();
}
createForm() {
this.registerForm = this.fb.group({
'name' : ['', Validators.required],
'email': ['', [Validators.required, Validators.email] ],
'passwords': this.fb.group({
password: ['', Validators.required],
repeat: ['', Validators.required]
}, {validator: this.matchValidator})
});
}
이렇게하면 하나뿐 아니라 그룹의 모든 컨트롤에 액세스 할 수 있으며 더 이상 this키워드 를 사용할 필요가 없습니다 . 그룹의 양식 컨트롤은 controlsFormGroup 의 속성을 사용하여 액세스 할 수 있습니다 . FormGroup은 유효성 검사가 트리거 될 때 제공됩니다. 예를 들면 :
matchValidator(group: FormGroup) {
var valid = false;
for (name in group.controls) {
var val = group.controls[name].value
(...)
}
if (valid) {
return null;
}
return {
mismatch: true
};
}
자세한 내용은이 anwer를 참조하십시오.
편집하다
오류를 표시하려면 다음을 사용하면됩니다.
<span *ngIf="!registerForm.passwords.valid" class="help-block text-danger">
<div *ngIf="registerForm.passwords?.errors?.mismatch">
The two passwords aren't the same
</div>
</span>
Angular 4에 대한 사용자 지정 암호 일치 검사기를 구현했습니다.
두 값이 일치하는지 확인하는 것 외에도 다른 컨트롤의 변경 사항을 구독하고 두 컨트롤 중 하나가 업데이트되면 다시 유효성을 검사합니다. 직접 구현을위한 참조로 사용하거나 직접 복사하십시오.
솔루션 링크는 다음과 같습니다. https://gist.github.com/slavafomin/17ded0e723a7d3216fb3d8bf845c2f30 .
그리고 여기에 코드 사본을 제공합니다.
match-other-validator.ts
import {FormControl} from '@angular/forms';
export function matchOtherValidator (otherControlName: string) {
let thisControl: FormControl;
let otherControl: FormControl;
return function matchOtherValidate (control: FormControl) {
if (!control.parent) {
return null;
}
// Initializing the validator.
if (!thisControl) {
thisControl = control;
otherControl = control.parent.get(otherControlName) as FormControl;
if (!otherControl) {
throw new Error('matchOtherValidator(): other control is not found in parent group');
}
otherControl.valueChanges.subscribe(() => {
thisControl.updateValueAndValidity();
});
}
if (!otherControl) {
return null;
}
if (otherControl.value !== thisControl.value) {
return {
matchOther: true
};
}
return null;
}
}
용법
반응 형과 함께 사용하는 방법은 다음과 같습니다.
private constructForm () {
this.form = this.formBuilder.group({
email: ['', [
Validators.required,
Validators.email
]],
password: ['', Validators.required],
repeatPassword: ['', [
Validators.required,
matchOtherValidator('password')
]]
});
}
더 많은 최신 유효성 검사기는 moebius-mlm / ng-validators 에서 찾을 수 있습니다 .
훨씬 더 간단한 해결책을 찾았습니다. 이것이 올바른 방법인지 확실하지 않지만 나를 위해 작동합니다.
<!-- PASSWORD -->
<ion-item [ngClass]="{'has-error': !signupForm.controls.password.valid && signupForm.controls.password.dirty}">
<ion-input formControlName="password" type="password" placeholder="{{ 'SIGNUP.PASSWORD' | translate }}" [(ngModel)]="registerCredentials.password"></ion-input>
</ion-item>
<!-- VERIFY PASSWORD -->
<ion-item [ngClass]="{'has-error': !signupForm.controls.verify.valid && signupForm.controls.verify.dirty}">
<ion-input formControlName="verify" [(ngModel)]="registerCredentials.verify" type="password" pattern="{{registerCredentials.password}}" placeholder="{{ 'SIGNUP.VERIFY' | translate }}"> </ion-input>
</ion-item>
보다
pattern="{{registerCredentials.password}}"
Angular 4.3.3 솔루션!
: 당신은 사용하여 작업을 수행 할 수 있습니다 [formGroup], formGroupName, formControlNameHTML과 new FormGroup, new FormControl및 사용자 정의 areEqualTS의 방법
reg.component.html
<div [formGroup]="userFormPassword">
<div>
<input formControlName="current_password" type="password" placeholder="Current Password">
</div>
<div formGroupName="passwords">
<input formControlName="new_password" type="password" placeholder="New Password">
</div>
<div formGroupName="passwords">
<input formControlName="repeat_new_password" type="password" class="form-control" placeholder="Repeat New Password">
<div class="input-error" *ngIf="
userFormPassword.controls['passwords'].errors &&
userFormPassword.controls['passwords'].errors.areEqual &&
userFormPassword.controls['passwords'].controls.repeat_new_password.touched &&
userFormPassword.controls['passwords'].controls.new_password.touched
">PASSWORDS do not match
</div>
</div>
</div>
reg.component.ts
export class HomeHeaderSettingsModalComponent implements OnInit {
userFormPassword: FormGroup;
// ...
static areEqual(c: AbstractControl): ValidationErrors | null {
const keys: string[] = Object.keys(c.value);
for (const i in keys) {
if (i !== '0' && c.value[ keys[ +i - 1 ] ] !== c.value[ keys[ i ] ]) {
return { areEqual: true };
}
}
}
ngOnInit() {
this.userFormPassword = new FormGroup({
'current_password': new FormControl(this.user.current_password, [
Validators.required,
]),
'passwords': new FormGroup({
'new_password': new FormControl(this.user.new_password, [
Validators.required
]),
'repeat_new_password': new FormControl(this.user.repeat_new_password, [
Validators.required
])
}, HomeHeaderSettingsModalComponent.areEqual)
});
}
}
결과: 
RC.5를 사용 중이고 ControlGroup을 찾을 수없는 경우 FormGroup을 사용해 볼 수 있습니다. 내 대답에서 더 많은 것을 알 수 있습니다.
암호 반복을위한 Angular 2 RC.5 양식 유효성 검사
이 라이브러리 ng2-validation-manager를 사용 하면 다음과 같이 쉽게 할 수 있습니다.
this.form = new ValidationManager({
'password' : 'required|rangeLength:8,50',
'repassword' : 'required|equalTo:password'
});
또한 0.2.0 형식의 angular 2 rc4부터는 오류를 방지하기 위해 그룹화 된 입력을 포함하는 데 사용되는 그룹 이름을 호출하는 마크 업 및 속성이 필요합니다.
<div formGroupName="passwords">group input fields here... </div>
인스턴스 변수에 비밀번호를 저장하십시오.
password = new FormControl('', [Validators.required]);
그런 다음 양식 그룹에서 사용하십시오.
this.registrationForm = this.fb.group({
'email': ['', [
Validators.required,
NGValidators.isEmail,
]
],
'password': this.password,
'password2': ['', [Validators.required, this.passwordMatch]]
});
따라서 함수는 다음과 같습니다.
private passwordMatch() {
let that = this;
return (c: FormControl) =>
{
return (c.value == that.password.value) ? null : {'passwordMatch': {valid: false}};
}
}
나는 그것이 최선의 해결책이 아니라는 것을 알고 있지만 작동합니다!
글쎄, 나는이 주제에 대한 답을 찾았고 모두 내 게으름에 너무 커서 이렇게했습니다. 나는 그것이 일을 잘 수행한다고 생각합니다.
ngModel을 사용하여 암호와 repeatPassword 입력을 바인딩 한 다음 angular 2의 [hidden] 속성이있는 암호 비교 메시지가있는 div를 표시하거나 숨겼습니다.
<label for="usr">Password</label>
<input placeholder="12345" id="password" type="text" class="form-control"
[(ngModel)]="password">
<label for="usr">Repeat pasword</label>
<input placeholder="12345" type="text" class="form-control"
[(ngModel)]="repeatPassword">
<div [hidden]="password == repeatPassword">Passwords do not match!</div>
코드의 일관성과 오류 처리에 관한 한 나를 더 행복하게 만드는 솔루션을 찾았습니다.
1st : 유효성 검사를 수행하는 정적 메서드로 사용자 지정 유효성 검사 클래스를 만듭니다.
이 메소드에는 각도가 주입하는 AbstractControl 매개 변수가 있어야합니다.
ConfirmPassword 컨트롤에서이를 전달하므로 부모를 호출하여 FormGroup을 가져와야합니다. 거기에서 formGroup.get ( 'myControl')을 호출하고 암호에 대한 컨트롤을 가져 와서 양식 그룹을 만들 때 이름을 지정한대로 확인합니다.
import {AbstractControl} from '@angular/forms';
export class PasswordValidation {
static MatchPassword(AC: AbstractControl) {
const formGroup = AC.parent;
if (formGroup) {
const passwordControl = formGroup.get('Password'); // to get value in input tag
const confirmPasswordControl = formGroup.get('Confirm'); // to get value in input tag
if (passwordControl && confirmPasswordControl) {
const password = passwordControl.value;
const confirmPassword = confirmPasswordControl.value;
if (password !== confirmPassword) {
return { matchPassword: true };
} else {
return null;
}
}
}
return null;
}
}
2nd : 각도를 사용하는 것처럼 Customer Validator를 사용하십시오.
this.registerForm = this.fb.group({ // <-- the parent FormGroup
Email: ['', Validators.required ],
Username: ['', Validators.required ],
FirstName: ['', Validators.required ],
Password: ['',
[
Validators.required,
Validators.minLength(6)
]
],
Confirm: ['',
[
Validators.required,
PasswordValidation.MatchPassword
]
]
});
그런 다음 Angular는 'matchPassword'를 추가합니다 : 값이 누락되었을 때 'required'true를 추가하는 것과 똑같이 Confirm 컨트롤 오류에 true
요약
- 다른 컨트롤의 값이 변경 될 때마다 유효성 검사를 트리거합니다.
- 메모리 누수 방지를 위해 구독 취소
- 반환
{match: true}하면 주어진 컨트롤에 오류가 있는지 확인할 수 있습니다.myControl.hasError('match')
이행
import { AbstractControl, ValidatorFn } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';
export function matchOtherValidator(otherControlName: string): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
const otherControl: AbstractControl = control.root.get(otherControlName);
if (otherControl) {
const subscription: Subscription = otherControl
.valueChanges
.subscribe(() => {
control.updateValueAndValidity();
subscription.unsubscribe();
});
}
return (otherControl && control.value !== otherControl.value) ? {match: true} : null;
};
}
예
this.registerForm = formBuilder.group({
email: ['', [
Validators.required, Validators.email
]],
password: ['', [
Validators.required, Validators.minLength(8)
]],
confirmPassword: ['', [
Validators.required, matchOtherValidator('password')
]]
});
추가가 필요하지 않은 Angular 4.3.4 용 솔루션 FormGroup:
repeatedPassword비밀번호가 동일한 지 확인 하기 위해 맞춤 유효성 검사기를 등록 하십시오.password.valueChanges양식 작성 중에 처리기를 구독.updateValueAndValidity() method하고repeatedPassword
다음은 몇 가지 코드입니다.
form: FormGroup
passwordFieldName = 'password'
repeatedPasswordFieldName = 'repeatedPassword'
createForm() {
this.form = this.formBuilder.group({
login: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(255), Validators.email]],
[passwordFieldName]: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(255)]],
[repeatedPasswordFieldName]: ['', [Validators.required, this.samePassword]]
});
this.form
.get(passwordFieldName)
.valueChanges.subscribe(() => {
this.form
.get(repeatedPasswordFieldName).updateValueAndValidity();
})
}
samePassword(control: FormControl) {
if (!control || !control.parent) {
return null;
}
if (control.value !== control.parent.get(passwordFieldName).value) {
return {'passwordMismatch': true}
}
return null;
}
내 솔루션을 게시하고 싶습니다.
this.authorizationSettings = formBuilder.group({
currentPassword: [null, Validators.compose([Validators.required, Validators.minLength(8)])],
newPassword: [null, Validators.compose([Validators.required, Validators.minLength(8)])],
repeatNewPassword: [null]
});
this.authorizationSettings.controls.newPassword.valueChanges.subscribe(data => {
if (data) {
data = data.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
}
this.authorizationSettings.controls.repeatNewPassword
.clearValidators();
this.authorizationSettings.controls.repeatNewPassword
.setValidators(Validators.compose([Validators.required, Validators.pattern(data)]));
});
먼저 양식 그룹을 만든 다음 첫 번째 새 암호 필드에 가입 한 다음 반복 필드에 유효성 검사를 추가해야합니다.
Angular Validators를 사용하는 방법은 다음과 같습니다.
구성 요소:
import { UserModel } from '../../settings/users/user.model';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormRequestModel } from '../Shared/form.model';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-add-user',
templateUrl: './add-user.component.html',
styleUrls: ['./add-user.component.scss']
})
export class AddUserComponent implements OnInit {
passwordsForm: FormGroup;
user: UserModel;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.passwordsForm = this.fb.group({
inputPassword: ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(50)])],
inputPasswordAgain: ['']
});
}
}
HTML :
<form class="form-horizontal" [formGroup]="passwordsForm" novalidate>
<div class="form-group">
<br/>
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" formControlName="inputPassword" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="alert alert-danger" *ngIf="!passwordsForm.controls['inputPassword'].valid && passwordsForm.controls['inputPassword'].touched">Password must contain at least 6 characters!!</div>
<div class="form-group">
<br/>
<label for="inputPasswordAgain" class="col-sm-2 control-label">Password again</label>
<div class="col-sm-10">
<input type="password" formControlName="inputPasswordAgain" class="form-control" id="inputPasswordAgain" placeholder="Password again">
</div>
</div>
<!-- Show div warning element if both inputs does not match the validation rules below -->
<div class="alert alert-danger" *ngIf="passwordsForm.controls['inputPasswordAgain'].touched
&& passwordsForm.controls['inputPasswordAgain'].value !== passwordsForm.controls['inputPassword'].value">
Both passwords must be equal!</div>
지시문을 만들고 사용하려면 다음을 참조하십시오.
다음은 완전한 지시문 코드입니다.
import { Directive, Attribute } from '@angular/core';
import { Validator, NG_VALIDATORS } from '@angular/forms';
@Directive({
selector: '[advs-compare]',
providers: [{provide: NG_VALIDATORS, useExisting: CompareDirective, multi: true}]
})
export class CompareDirective implements Validator {
constructor(@Attribute('advs-compare') public comparer: string){}
validate(c: Control): {[key: string]: any} {
let e = c.root.get(this.comparer);
if(e && c.value !== e.value){
return {"compare": true};
}
return null;
}
}
사용 방법에 대한 자세한 내용은 http://www.advancesharp.com/blog/1226/angular-5-email-compare-password-validation-different-ways를 참조하십시오 .
Angular로 시작하여이 솔루션을 찾았습니다. 좋은 방법인지 모르겠습니다.
// Custom password confirmation validation
static matchFieldValidator(fieldToMatch:string) : ValidatorFn {
return (control : AbstractControl) : { [key: string]: any;} => {
let confirmField = control.root.get(fieldToMatch);
return (confirmField && control.value !== confirmField.value) ? {match:false} : null;
}
}
이렇게하면 유효성 검사 규칙을 설정할 때 다음과 같이 할 수 있습니다.
this.registrationForm = fb.group({
...
password1 : ['', [Validators.minLength(3)]],
// remember to replace RegisterComponent with YOUR class name
password2 : ['', [RegisterComponent.matchFieldValidator('password1')]],
});
이것이 제가 따르는 가장 쉬운 방법입니다. 관련이없는 코드를 제거했습니다.
나는 이것이 당신을 도울 것이라고 생각합니다.
auth.component.ts, auth.component.html, auth.component.css
import { Component, OnInit, EventEmitter, Input, Output ,Directive, forwardRef, Attribute,OnChanges, SimpleChanges} from '@angular/core';
import { NG_VALIDATORS,Validator,Validators,AbstractControl,ValidatorFn } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { RegisterUser } from '../shared/models';
@Component({
moduleId: module.id,
selector: 'auth-page',
styleUrls: ['./auth.component.css'],
templateUrl: './auth.component.html'
})
export class AuthComponent implements OnInit {
userRegisterModel: RegisterUser = new RegisterUser();
constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
this.userRegisterModel.LoginSource = 'M';//Manual,Facebook,Google
}
userRegister() {
console.log(this.userRegisterModel);
}
}.validation
{
margin:0;
padding-top: 1px;
padding-bottom: 0px;
}
.validation .message
{
font-size: 10px;
color: #de1a16;
} <form (ngSubmit)="userRegister()" #authRegisterForm="ngForm" novalidate>
<div class="col-md-6 form-group" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
<label>First Name:</label>
<input type="text" class="form-control" required pattern="[a-zA-Z][a-zA-Z ]+" [(ngModel)]="userRegisterModel.firstName" name="firstName"
#firstName="ngModel" placeholder="Your first name">
<div style="display: flex;">
<div [hidden]="firstName.valid || firstName.pristine" class="validation">
<div [hidden]="!firstName.hasError('required')" class="message">Name is required</div>
<div [hidden]="!firstName.hasError('pattern')" class="message">Only alphabets allowed</div>
</div>
</div>
</div>
<div class="col-md-6 form-group" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
<label>Last Name:</label>
<input type="text" class="form-control" required pattern="[a-zA-Z][a-zA-Z ]+" [(ngModel)]="userRegisterModel.lastName" name="lastName"
#lastName="ngModel" placeholder="Your last name">
<div style="display: flex;">
<div [hidden]="lastName.valid || lastName.pristine" class="validation">
<div [hidden]="!lastName.hasError('required')" class="message">Name is required</div>
<div [hidden]="!lastName.hasError('pattern')" class="message">Only alphabets allowed</div>
</div>
</div>
</div>
<div class="col-md-12 form-group" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
<label>Email:</label>
<input type="text" class="form-control" required [(ngModel)]="userRegisterModel.email" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
#email="ngModel" placeholder="Your email">
<div style="display: flex;">
<div [hidden]="email.valid || email.pristine" class="validation">
<div [hidden]="!email.hasError('required')" class="message">Email is required</div>
<div [hidden]="!email.hasError('pattern')" class="message">Email format should be
<small>
<b>john@doe.com</b>
</small>
</div>
</div>
</div>
</div>
<div class="col-md-12 form-group" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
<label>Password:</label>
<input type="password" class="form-control" required [(ngModel)]="userRegisterModel.password" name="password" #password="ngModel"
minlength="6" placeholder="Your strong password" >
<div style="display: flex;">
<div [hidden]="password.valid || password.pristine" class="validation">
<div [hidden]="!password.hasError('minlength')" class="message">Password should be 6digit</div>
<div [hidden]="!password.hasError('required')" class="message">Password is required</div>
</div>
</div>
</div>
<div class="col-md-12 form-group" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
<label>Confirm Password:</label>
<input type="password" class="form-control" required validateEqual="password" [(ngModel)]="userRegisterModel.confirmPassword"
name="confirmPassword" #confirmPassword="ngModel" placeholder="Confirm your password">
<div style="display: flex;">
<div [hidden]="confirmPassword.valid || confirmPassword.pristine" class="validation">
<div class="message">Passwords did not match</div>
</div>
</div>
</div>
<div class="col-md-12 form-group text-right" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
<button type="submit" class="btn btn-primary" [disabled]="!authRegisterForm.form.valid">
Submit form
<i class="icon-arrow-right14 position-right"></i>
</button>
</div>
</form>registerUser.mocel.ts
export class RegisterUser {
FirstName : number;
LastName : string;
Email: string;
Password : string;
} password.match.directive.ts
import { Directive, forwardRef, Attribute } from '@angular/core';
import { NG_VALIDATORS,Validator,Validators,AbstractControl,ValidatorFn } 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) {}
validate(c: AbstractControl): { [key: string]: any } {
// self value (e.g. retype password)
let v = c.value;
// control value (e.g. password)
let e = c.root.get(this.validateEqual);
// value not equal
if (e && v !== e.value) return {
validateEqual: false
}
return null;
}
}app.module.ts
import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
//import { AppRoutingModule } from './app-routing.module';
//import { AppComponent } from './app.component';
//shared components
import { EqualValidator} from './shared/password.match.directive';
@NgModule({
declarations: [
// AppComponent,
//FooterComponent,
// HeaderComponent,
// LoginComponent,
// LayoutComponent,
// AuthComponent,
// UserExistComponent,
// HomeComponent,
EqualValidator
],
imports: [
// BrowserModule,
// AppRoutingModule,
// SharedModule
],
providers: [
// ApiService,
// AuthGuard,
//JwtService,
// UserService,
// HomeAuthResolver,
// NoAuthGuard,
// SharedService
],
bootstrap: [AppComponent]
})
export class AppModule { }암호를 일치시키기 위해 사용자 정의 유효성 검사기가 필요하지 않다고 생각합니다. 이것은를 사용하여 쉽게 얻을 수 있습니다 formname.controls['controlName'].value.
<input type="password" class="form-control" formControlName="password">
<div class="alert alert-danger" *ngIf="!userForm.controls['password'].valid && userForm.controls['password'].touched">
Enter valid password between 7 and 14 characters.
</div>
<input type="password" class="form-control" formControlName="confPassword">
<div *ngIf="userForm.controls['confPassword'].touched">
<div class="alert alert-danger" *ngIf="userForm.controls['confPassword'].value != userForm.controls['password'].value">
Password do not match
</div>
</div>
에서 fileName.component.ts폼 컨트롤로 선언 :
'password':[null, Validators.compose([Validators.required, Validators.minLength(7), Validators.maxLength(14))],
'confPassword':[null, Validators.required]
토론의 질문을 제기 한 Zhou Hao 사람에 대한 응답으로 당신과 같은 일이 저에게 일어났기 때문에 이것이 당신이 찾고 있던 것이라고 생각합니다. 그는 변수가 정의되지 않았다고 말했고 다음과 같이 해결합니다.
static comparePassword(control) {
try {
control.parent.value.password;
if (control.parent.value.password == control.value) {
return null;
} else {
return { 'invalidValue': true };
}
} catch (e) {
e.message;
}
}
참고 URL : https://stackoverflow.com/questions/35474991/angular-2-form-validating-for-repeat-password
반응형
'development' 카테고리의 다른 글
| nodejs 요청 기본 제한 시간을 수정하는 방법은 무엇입니까? (0) | 2020.12.07 |
|---|---|
| Pandas 데이터 프레임 열의 일부 값을 다른 값으로 바꾸기 (0) | 2020.12.07 |
| Xcode에 개발 팀이 표시되지 않음 (0) | 2020.12.07 |
| 상태 저장 위젯에 데이터 전달 (0) | 2020.12.07 |
| DOM 노드 인덱스 찾기 (0) | 2020.12.07 |