Question

我想比较密码字段和确认密码而不创建新指令，只需使用ngModel和HTML。如果密码不匹配，我会阻止提交按钮，而且工作正常。但是我想在用户重新输入（或提交）时显示一个span错误消息，到目前为止，在密码字段的第一次输入之后（当retype为空时）我收到错误消息。这是合乎逻辑的，我有我的代码，但我想知道如果不使用验证器或指令，是否有可能拥有更好的用户体验？我已经尝试了几个方法，但没有任何效果......任何提示都会受到赞赏。代码：

<form #confirm="ngForm" novalidate>
          <mat-form-field class="full-width">
            <input matInput type="password" id="password" placeholder="New Password" name="password"
                   [(ngModel)]="loginValues.password" required>

          </mat-form-field>

          <mat-form-field class="full-width">
            <input matInput type="password" id="confirmPassword" placeholder="Retype Password" name="confirmPassword"
                   [(ngModel)]="loginValues.confirmPassword" required>

          </mat-form-field>
                <!--Error Message-->
            <span *ngIf="loginValues.confirmPassword  !== loginValues.password">{{ 'login.password_not_match' | translate }}</span>

          <div class="child-padding-top no-side-padding" fxLayoutAlign="end center" >
            <button class="button-login-register" [disabled]="loginValues.password !== loginValues.confirmPassword" mat-button color="primary"
                    (click)="clientNewPassword()" >{{ 'login.SUBMIT' | translate }}</button>
          </div>
        </form>

Answer 1

除非您将span用于某个目的（为其添加类等），否则不应使用* ngIf的span。但似乎你只是用它来保存你的* ngIf语句，因为* ngIf必须被标记为一个元素。如果你打算这样做，你应该改为使用

<ng-container *ngIf=""></ng-container>.

要回答您的问题，我认为您可以在不应用验证的情况下做的唯一事情就是添加更多逻辑。例如，您可以这样做：

 <ng-container* ngIf="loginValues.confirmPassword !== loginValues.password 
    && loginValues.confirmPassword.length > 0 
    && loginValues.password.length > 0 ">
    {{ 'login.password_not_match' | translate }}
 </ng-container>

基本上你正在做的是更改它，以便在密码不匹配时不会始终显示错误，而是用户必须先填写两个输入。还有其他你可以做的事情。例如，您可以使用ngTouched / ngDirty等。您可以根据需要设置规则。

Angular 4：错误输入字段，错误消息

1 个答案: