Angular模板驱动表单：仅在用户交互后验证密码字段的问题求助

嗨，我来帮你搞定这个问题～

你遇到的情况是Angular模板驱动表单的默认行为导致的：页面加载时，必填的空字段会被标记为ng-invalid，如果你的样式直接基于ng-invalid类来设置红色，那页面一打开输入框就会变红。而你想要的是只有用户触碰过这个输入框，且之后仍然为空时才显示红色，这就需要结合控件的touched状态来做判断。

下面给你两种可行的解决方案：

方案一：利用Angular自带的状态类修改样式 #

Angular会自动给表单控件添加一系列状态类，比如ng-touched（用户已交互）、ng-untouched（未交互）、ng-invalid（验证不通过）、ng-valid（验证通过）。我们可以通过组合这些类来精准控制样式：

原来的样式可能是这样的（会导致初始变红）：

input.ng-invalid {
  border-color: red;
}

把它改成下面这样，只有当控件被触碰过且验证不通过时才应用红色样式：

input.ng-touched.ng-invalid {
  border-color: red;
}

这种方法不需要修改HTML模板，只需要调整CSS规则，非常简洁。

方案二：手动绑定控件的class属性 #

如果你希望更直观地在模板里控制样式，可以直接给输入框绑定class属性，显式判断touched和invalid状态：

修改你的密码输入框代码：

<input
  type="password"
  id="password"
  name="password"
  ngModel
  #password="ngModel"
  placeholder="Input text"
  required
  [class.text-danger-border]="password.touched && password.invalid"
/>

然后在CSS里定义这个自定义样式类：

.text-danger-border {
  border: 1px solid red;
}

这样只有当password.touched && password.invalid为true时，输入框才会加上红色边框。

补充说明 #

你原来的错误提示逻辑是对的：*ngIf="password.touched && password.invalid"，所以错误消息只会在用户交互后才显示。现在只需要把输入框的样式判断逻辑和错误消息保持一致，就能实现你想要的效果——页面加载时输入框正常显示，用户触碰过输入框但没填内容时，输入框才变红并显示错误提示。

最后给你贴一下修改后的完整代码片段参考：

<h2 class="text-align-center">Login</h2>
<div class="app-plate">
  <form #loginForm="ngForm">
    <div class="login-form-group">
      <input
        type="password"
        id="password"
        name="password"
        ngModel
        #password="ngModel"
        placeholder="Input text"
        required
      />
      <span
        *ngIf="password.touched && password.invalid"
        id="passwordErrorMessage"
        class="text-danger"
        >Password is required.</span
      >
    </div>
    <!-- 其他表单内容 -->
  </form>
</div>

对应的CSS：

input.ng-touched.ng-invalid {
  border: 1px solid red;
}

备注：内容来源于stack exchange，提问作者user28273827332