我想只使用角度材料组件执行密码和确认密码活动,如果确认密码字段不匹配,则确认密码组件下面会显示错误消息.如果它是空的,则会有很多资源无法实现.
@H_403_1@也试过这个视频
1)如果密码和确认密码字段为空,则显示错误文本. @H_403_1@我想比较(.ts)文件中的字段,比如它如何验证空字段,以及如果确认密码字段为空则会出现错误.
https://www.youtube.com/watch?v=YhazkQd59Hk@H_403_1@这是我正在寻找的材料成分 @H_403_1@ @H_403_1@我正在使用的这些密码组件(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>@H_403_1@这是(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; }@H_403_1@它验证以下条件罚款
1)如果密码和确认密码字段为空,则显示错误文本. @H_403_1@我想比较(.ts)文件中的字段,比如它如何验证空字段,以及如果确认密码字段为空则会出现错误.
这个问题可以通过这两个答案的组合来解决:
https://stackoverflow.com/a/43493648/6294072和
https://stackoverflow.com/a/47670892/6294072
@H_403_1@首先,您需要一个自定义验证器来检查密码,它们可能如下所示:
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 } }@H_403_1@并且您将为您的字段创建一个表单组,而不是只创建两个表单控件,然后为您的表单组标记该自定义验证器:
this.myForm = this.fb.group({ password: ['',[Validators.required]],confirmPassword: [''] },{validator: this.checkPasswords })@H_403_1@然后如其他答案所述,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); } }@H_403_1@在上面你可以调整何时显示错误信息.我只会在触摸密码字段时显示消息.另外我想在上面,从confirmPassword字段中删除所需的验证器,因为如果密码不匹配,表单无论如何都无效. @H_403_1@然后在组件中,创建一个新的ErrorStateMatcher:
matcher = new MyErrorStateMatcher();@H_403_1@最后,模板看起来像这样:
<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>@H_403_1@以下是使用上述代码的演示:https://stackblitz.com/edit/angular-yhbuqn-s5lmtv?file=app%2Finput-error-state-matcher-example.ts