Javascript 角度4：输入字段与错误消息不匹配

我想比较密码字段和确认密码，而不创建新的指令，只使用ngModel和HTML。我有一个提交按钮阻止，如果密码不匹配，这是正常工作。但我想在用户重新键入（或提交时）时显示一条span错误消息，到目前为止，在第一次输入密码字段（当重新键入为空时）之后，我得到了错误消息。这是合乎逻辑的，我有代码，但我想知道是否有可能有一个更好的用户体验不使用验证器或指令？我试过好几种方法，但都不管用……任何提示都将不胜感激。守则：

<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>

{{'login.password}不匹配{124; translate}
{{'login.SUBMIT'| translate}}

您不应将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>

{{'login.password}不匹配{124; translate}

---

基本上，您所做的是更改它，这样当密码不匹配时，错误不会总是显示出来，而是用户必须先填写两个输入。你还可以做其他事情。例如，您可以使用ngTouch/ngDirty等。您可以根据自己的喜好设置规则。

那么，为什么要进行向下投票……谢谢您的回答，但根据这种逻辑，我收到了大量的消息，我想我需要应用验证……不，您不需要。观察：我的坏，非常感谢@David Anthony Acosta，它就像一个符咒：）