使用Angular5进行表单验证时无法获取错误提示

我来帮你搞定这个问题！你看不到错误提示主要有两个原因：一是Angular的模板驱动表单需要手动根据控件的验证状态（比如是否必填、是否已被触碰）来触发错误显示；二是你用的Materialize样式框架需要对应状态类来激活错误提示的样式。

下面是修改后的完整代码，我会标注关键改动：

<form class="col s12 white" #userRegistrationForm="ngForm">
  <div class="row">
    <!-- 用户名输入框 -->
    <div class="input-field col s6">
      <input 
        class="validate" 
        type="text" 
        name="UserName" 
        #UserName="ngModel" 
        [(ngModel)]="user.UserName" 
        required>
      <label data-error="Required Field!" for="UserName">UserName</label>
      <!-- 新增：手动显示错误提示，只有当控件无效且已触碰/修改时才显示 -->
      <span class="red-text" *ngIf="UserName.invalid && (UserName.touched || UserName.dirty)">
        Username is required!
      </span>
    </div>

    <!-- 密码输入框 -->
    <div class="input-field col s6">
      <input 
        class="validate" 
        type="password"  <!-- 建议改成password类型更合理 -->
        name="Password" 
        #Password="ngModel" 
        [(ngModel)]="user.Password" 
        required>
      <!-- 新增：给密码的label加上data-error -->
      <label data-error="Required Field!" for="Password">Password</label>
      <!-- 新增：密码的错误提示 -->
      <span class="red-text" *ngIf="Password.invalid && (Password.touched || Password.dirty)">
        Password is required!
      </span>
    </div>

    <!-- 邮箱输入框（可选添加格式验证） -->
    <div class="input-field col s6">
      <input type="email" name="Email" #Email="ngModel" [(ngModel)]="user.Email" email>
      <label data-error="Invalid email!" for="Email">Email</label>
      <span class="red-text" *ngIf="Email.invalid && (Email.touched || Email.dirty)">
        Please enter a valid email!
      </span>
    </div>

    <div class="input-field col s6">
      <input type="text" name="FirstName" #FirstName="ngModel" [(ngModel)]="user.FirstName">
      <label>FirstName</label>
    </div>

    <div class="input-field col s6">
      <input type="text" name="LastName" #LastName="ngModel" [(ngModel)]="user.LastName">
      <label>LastName</label>
    </div>
  </div>

  <div class="row">
    <div class="input-field col s12">
      <!-- 新增：表单无效时禁用提交按钮 -->
      <button class="btn-large btn-submit" type="submit" [disabled]="!userRegistrationForm.valid">
        Submit
      </button>
    </div>
  </div>
</form>

关键改动说明： #

• 激活Materialize错误样式：给必填字段的label添加data-error属性，并且确保输入框有validate类（密码输入框之前没加，我补上了）。
• 手动触发错误提示：用*ngIf判断控件的状态：控件名.invalid && (控件名.touched || 控件名.dirty)，只有当控件无效且用户已经触碰/修改过它时，才显示红色的错误文本。
• 优化细节：把密码输入框改成type="password"更符合场景，给邮箱输入框添加email验证规则，同时给提交按钮添加禁用逻辑，避免用户提交无效表单。
• 组件类补充：别忘了在你的组件.ts文件里初始化user对象，避免ngModel报错：

export class YourComponent {
  user = {
    UserName: '',
    Password: '',
    Email: '',
    FirstName: '',
    LastName: ''
  };
}

这样修改后，当用户点击输入框再离开（touched）或者输入内容后清空（dirty），如果不符合验证规则（比如必填为空、邮箱格式错误），就会显示对应的错误提示啦！

内容的提问来源于stack exchange，提问作者Arthi