angular - ionic4 形式的密码和确认密码匹配验证
问题描述
我在 ionic4 中创建了一个注册表单,其中包含名字、姓氏、电子邮件、密码和确认密码等字段。
我还添加了验证,例如如果用户离开或触摸相应的字段,则显示这些字段是必需的。
我想为密码添加验证并确认密码。即如果密码和确认密码不匹配错误。
下面是我的代码:
.html 文件:
<ion-content>
<div style="margin: 30px">
<ion-title class="ion-text-center">Register</ion-title>
<form [formGroup]="loginForm">
<ion-item>
<ion-label position="floating">First Name*</ion-label>
<ion-input formControlName="fname" type="text"></ion-input>
</ion-item>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.fname">
<div class="error-message" *ngIf="loginForm.get('fname').hasError(error.type) && (loginForm.get('fname').dirty || loginForm.get('fname').touched)">
{{ error.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating">Last Name*</ion-label>
<ion-input formControlName="lname" type="text"></ion-input>
</ion-item>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.lname">
<div class="error-message" *ngIf="loginForm.get('lname').hasError(error.type) && (loginForm.get('lname').dirty || loginForm.get('lname').touched)">
{{ error.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating">Email Id*</ion-label>
<ion-input formControlName="email" type="text"></ion-input>
</ion-item>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.email">
<div class="error-message" *ngIf="loginForm.get('email').hasError(error.type) &&
(loginForm.get('email').dirty || loginForm.get('email').touched)">
{{ error.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating">Password*</ion-label>
<ion-input formControlName="password" type="password"></ion-input>
</ion-item>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.password">
<div class="error-message" *ngIf="loginForm.get('password').hasError(error.type) && (loginForm.get('password').dirty || loginForm.get('password').touched)">
{{ error.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating">Confirm Password*</ion-label>
<ion-input formControlName="confirmpassword" type="password"></ion-input>
</ion-item>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.confirmpassword">
<div class="error-message" *ngIf="loginForm.get('confirmpassword').hasError(error.type) && (loginForm.get('confirmpassword').dirty || loginForm.get('confirmpassword').touched)">
{{ error.message }}
</div>
</ng-container>
</div>
<br>
<div>
<ion-button [disabled]="!loginForm.valid" expand="full">Signup</ion-button>
</div>
</form>
</div>
</ion-content>
.ts 文件:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
loginForm: FormGroup;
error_messages = {
'fname': [{
type: 'required',
message: 'First Name is required.'
}, ],
'lname': [{
type: 'required',
message: 'Last Name is required.'
}],
'email': [{
type: 'required',
message: 'Email is required.'
},
{
type: 'minlength',
message: 'Email length.'
},
{
type: 'maxlength',
message: 'Email length.'
},
{
type: 'required',
message: 'please enter a valid email address.'
}
],
'password': [{
type: 'required',
message: 'password is required.'
},
{
type: 'minlength',
message: 'password length.'
},
{
type: 'maxlength',
message: 'password length.'
}
],
'confirmpassword': [{
type: 'required',
message: 'password is required.'
},
{
type: 'minlength',
message: 'password length.'
},
{
type: 'maxlength',
message: 'password length.'
}
],
}
constructor(
public formBuilder: FormBuilder
) {
this.loginForm = this.formBuilder.group({
fname: new FormControl('', Validators.compose([
Validators.required
])),
lname: new FormControl('', Validators.compose([
Validators.required
])),
email: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(6),
Validators.maxLength(30)
])),
password: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(6),
Validators.maxLength(30)
])),
confirmpassword: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(6),
Validators.maxLength(30)
])),
})
}
ngOnInit() {}
}
如果输入的密码不匹配,请帮助我如何添加密码验证和确认密码。
解决方案
FormGroup
只需创建一个接受 a并在这两个字段不匹配时返回错误的验证器。
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
loginForm: FormGroup;
error_messages = { ... }
constructor(
public formBuilder: FormBuilder
) {
this.loginForm = this.formBuilder.group({
fname: new FormControl('', Validators.compose([
Validators.required
])),
...
confirmpassword: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(6),
Validators.maxLength(30)
])),
}, {
validators: this.password.bind(this)
});
}
ngOnInit() {
}
password(formGroup: FormGroup) {
const { value: password } = formGroup.get('password');
const { value: confirmPassword } = formGroup.get('confirmpassword');
return password === confirmPassword ? null : { passwordNotMatch: true };
}
}
更新:
在您的模板中:
<div class="container">
<div style="margin: 30px">
<h1 class="ion-text-center">Register</h1>
<form [formGroup]="loginForm">
<div class="form-group">
<label>First Name*</label>
<input class="form-control" formControlName="fname" type="text" />
</div>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.fname">
<div class="error-message" *ngIf="loginForm.get('fname').hasError(error.type) && (loginForm.get('fname').dirty || loginForm.get('fname').touched)">
{{ error.message }}
</div>
</ng-container>
</div>
...
<div class="form-group">
<label>Confirm Password*</label>
<input class="form-control" formControlName="confirmpassword" type="password" />
</div>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.confirmpassword">
<div class="error-message" *ngIf="loginForm.get('confirmpassword').hasError(error.type) && (loginForm.get('confirmpassword').dirty || loginForm.get('confirmpassword').touched)">
{{ error.message }}
</div>
</ng-container>
<div class="error-message" *ngIf="!loginForm.get('confirmpassword').errors && loginForm.hasError('passwordNotMatch') && (loginForm.get('confirmpassword').dirty || loginForm.get('confirmpassword').touched)">
Password and Confirm Password fields should match
</div>
</div>
<button class="form-control btn btn-primary" [disabled]="!loginForm.valid">Signup</button>
</form>
</div>
</div>
这是您参考的工作示例 StackBlitz。
推荐阅读
- ethereum - 相同的智能合约文件,大小不同?
- xamarin - 减小视频文件大小
- node.js - 如何同时使用 node-ipc 和 express
- android - WifiP2P 在对等点发现上给出不一致的结果
- c++ - 如何将向量转换为矩阵 C++ vec2mat
- c# - 如何在用户屏幕的特定坐标处截屏并将其保存为example.jpeg c#?
- v8 - 为什么 JS 工厂/闭包比构造函数/原型慢得多?
- python - 矩阵减法类似于张量流中的矩阵乘法
- php - Laravel webdav和文件系统无法访问驱动器
- javascript - 我应该为这个 Tampermonkey 脚本选择哪个元素?还是可以等到所有内容加载完毕?