嗨,我是 Angular 的新手,我有一个主要问题和一个小的样式问题,首先让我们来看看主要问题: 这些是我输入的密码我从网上获得了代码并稍微修改了它。
<mat-form-field appearance="fill">
<mat-label>Passwort</mat-label>
<input matInput [type]="hidepwd ? 'password' : 'text'" id="passwordInput" [formControl]="password" required>
<button mat-icon-button matSuffix (click)="hidepwd = !hidepwd" [attr.aria-label]="'Passwort anzeigen/verstecken'"
[attr.aria-pressed]="hidepwd">
<mat-icon>{{hidepwd ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
<mat-error *ngIf="password.invalid && (password.dirty || password.touched)">
{{getPasswordErrorMessage()}}
</mat-error>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>Passwort bestätigen</mat-label>
<input matInput [type]="hidepwdrepeat ? 'password' : 'text'" id="confirmPasswordInput" [formControl]="confirmPassword" (input)="checkPasswordMatch()" required>
<button mat-icon-button matSuffix (click)="hidepwdrepeat = !hidepwdrepeat" [attr.aria-label]="'Passwort anzeigen/verstecken'"
[attr.aria-pressed]="hidepwdrepeat">
<mat-icon>{{hidepwdrepeat ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
<mat-error *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)">
{{getConfirmPasswordErrorMessage()}}
</mat-error>
</mat-form-field>
这是 getConfirmPasswordErrorMessage 函数,我在此函数中对密码确认进行错误处理:
getConfirmPasswordErrorMessage() {
if (this.confirmPassword.hasError('required')) {
console.log("required");
return 'Pflichtfeld';
}
else if (this.password.value !== this.confirmPassword.value) {
console.log("passwords dont match");
return 'Passwörter stimmen nicht überein';
}
else {
console.log("no error");
return '';
}
}
所以现在我的问题是我收到错误“Pflichtfeld”,它是必填字段的德语,但我没有收到我的密码不匹配的错误,为什么??
我的造型问题:这是我的提交按钮:
<button mat-raised-button color="primary" (click)="register()">Registrieren</button>
我已经尝试过 (input)="checkPasswordMatch()" 就像你看到的那样,但还是一无所获
似乎您还没有为 confirmPassword FormControl 定义验证器。 mat-error 仅在其对应的表单控件出现错误时才会呈现。如果您仍然想看到错误,只需将 mat-error 替换为 div 或 span 并从 ngIf 中删除 confirmPassword.invalid 条件。
关于样式问题,请检查您是否从模块中的'@angular/material/button'导入了-MatButtonModule}。