我想只使用角度材料组件执行密码和确认密码活动,如果确认密码字段不匹配,则确认密码组件下面会显示错误消息.如果它是空的,则会有很多资源无法实现.
也试过这个视频
https://www.youtube.com/watch?v=YhazkQd59Hk
这是我正在寻找的材料成分
我正在使用的这些密码组件(set-pass.component.hmtl)
<mat-form-field >
<input matInput placeholder="New password" [type]="hide ? 'password'
: 'text'" [formControl]="passFormControl" required>
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' :
'visibility_off'}}</mat-icon>
<mat-error *ngIf="passFormControl.hasError('required')">
Please enter your newpassword
</mat-error>
</mat-form-field>
<mat-form-field >
<input matInput placeholder="Confirm password" [type]="hide ?
'password' : 'text'" [formControl]="confirmFormControl"
required>
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' :
'visibility_off'}}</mat-icon>
<mat-error *ngIf="confirmFormControl.hasError('required')">
Confirm your password
</mat-error>
</mat-form-field>
这是(set-pass.component.ts)文件
import {Component,OnInit } from '@angular/core';
import {FormControl,FormGroupDirective,NgForm,Validators} from
'@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';
@Component({
selector: 'ylb-set-pass',templateUrl: './set-pass.component.html',styleUrls: ['./set-pass.component.css']
})
passFormControl = new FormControl('',[
Validators.required,]);
confirmFormControl = new FormControl('',]);
hide =true;
}
这个问题可以通过这两个答案的组合来解决：
https://stackoverflow.com/a/43493648/6294072和
https://stackoverflow.com/a/47670892/6294072
首先,您需要一个自定义验证器来检查密码,它们可能如下所示：
checkPasswords(group: FormGroup) { // here we have the 'passwords' group
let pass = group.controls.password.value;
let confirmPass = group.controls.confirmPass.value;
return pass === confirmPass ? null : { notSame: true }
}
并且您将为您的字段创建一个表单组,而不是只创建两个表单控件,然后为您的表单组标记该自定义验证器：
this.myForm = this.fb.group({
password: ['',[Validators.required]],confirmPassword: ['']
},{validator: this.checkPasswords })
然后如其他答案所述,mat-error仅显示FormControl是否无效,因此您需要一个错误状态匹配器：
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null,form: FormGroupDirective | NgForm | null): boolean {
const invalidCtrl = !!(control && control.invalid && control.parent.dirty);
const invalidParent = !!(control && control.parent && control.parent.invalid && control.parent.dirty);
return (invalidCtrl || invalidParent);
}
}
在上面你可以调整何时显示错误信息.我只会在触摸密码字段时显示消息.另外我想在上面,从confirmPassword字段中删除所需的验证器,因为如果密码不匹配,表单无论如何都无效.
然后在组件中,创建一个新的ErrorStateMatcher：
matcher = new MyErrorStateMatcher();
最后,模板看起来像这样：
<form [formGroup]="myForm">
<mat-form-field>
<input matInput placeholder="New password" formControlName="password" required>
<mat-error *ngIf="myForm.hasError('required','password')">
Please enter your new password
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Confirm password" formControlName="confirmPassword" [errorStateMatcher]="matcher">
<mat-error *ngIf="myForm.hasError('notSame')">
Passwords do not match
</mat-error>
</mat-form-field>
</form>
以下是使用上述代码的演示：https://stackblitz.com/edit/angular-yhbuqn-s5lmtv?file=app%2Finput-error-state-matcher-example.ts
