Angular 中的表单错误和样式问题

问题描述 投票:0回答:1

嗨,我是 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>

为什么还是这个样子?: enter image description here

我已经尝试过 (input)="checkPasswordMatch()" 就像你看到的那样,但还是一无所获

javascript html angular typescript forms
1个回答
0
投票

似乎您还没有为 confirmPassword FormControl 定义验证器。 mat-error 仅在其对应的表单控件出现错误时才会呈现。如果您仍然想看到错误,只需将 mat-error 替换为 div 或 span 并从 ngIf 中删除 confirmPassword.invalid 条件。

关于样式问题,请检查您是否从模块中的'@angular/material/button'导入了-MatButtonModule}。

© www.soinside.com 2019 - 2024. All rights reserved.