Angular 4注册表单勾选标记校验实现咨询

嘿，我来帮你搞定这个需求！在Angular 4里，我们可以借助表单控件的状态类或者直接获取控件的校验状态，来动态显示勾选或叉号图标。下面分两种常见的表单实现方式来讲解：

一、模板驱动表单（Template-Driven Forms） #

模板驱动表单适合简单场景，我们可以用ngModel结合内置校验指令（比如required、minlength），再通过控件的状态来判断显示图标。

1. 组件TS代码 #

首先确保你的app.module.ts里导入并添加了FormsModule到imports数组，组件本身只需定义基础表单数据：

import { Component } from '@angular/core';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {
  user = {
    username: '',
    password: ''
  };

  onSubmit() {
    // 提交逻辑
    console.log('表单提交', this.user);
  }
}

2. HTML模板代码 #

在模板里，通过#变量="ngModel"获取控件实例，根据valid、touched等状态切换图标：

<form #registerForm="ngForm" (ngSubmit)="onSubmit()">
  <!-- 用户名输入框 -->
  <div class="form-group">
    <label>用户名</label>
    <input 
      type="text" 
      name="username" 
      class="form-control"
      [(ngModel)]="user.username"
      #username="ngModel"
      required
      minlength="3"
    >
    <!-- 校验状态图标 -->
    <span *ngIf="username.touched">
      <i class="fa fa-check text-success" *ngIf="username.valid"></i>
      <i class="fa fa-times text-danger" *ngIf="username.invalid"></i>
    </span>
    <!-- 错误提示（可选） -->
    <div *ngIf="username.invalid && username.touched" class="text-danger">
      <small *ngIf="username.errors?.required">用户名不能为空</small>
      <small *ngIf="username.errors?.minlength">用户名至少3个字符</small>
    </div>
  </div>

  <!-- 密码输入框 -->
  <div class="form-group">
    <label>密码</label>
    <input 
      type="password" 
      name="password" 
      class="form-control"
      [(ngModel)]="user.password"
      #password="ngModel"
      required
      minlength="6"
    >
    <span *ngIf="password.touched">
      <i class="fa fa-check text-success" *ngIf="password.valid"></i>
      <i class="fa fa-times text-danger" *ngIf="password.invalid"></i>
    </span>
    <div *ngIf="password.invalid && password.touched" class="text-danger">
      <small *ngIf="password.errors?.required">密码不能为空</small>
      <small *ngIf="password.errors?.minlength">密码至少6个字符</small>
    </div>
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="!registerForm.valid">注册</button>
</form>

这里用了Font Awesome图标，你也可以换成纯文本（比如✓和✗）或自定义SVG，核心是根据用户是否触碰过输入框（touched）和校验是否通过（valid）来切换显示。

二、响应式表单（Reactive Forms） #

响应式表单适合复杂场景，校验逻辑集中在TS中，更易维护扩展。

1. 组件TS代码 #

先在app.module.ts导入ReactiveFormsModule，然后组件内定义表单组和校验规则：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  registerForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    // 初始化表单组，绑定校验规则
    this.registerForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3)]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  onSubmit() {
    if (this.registerForm.valid) {
      console.log('表单提交', this.registerForm.value);
    }
  }

  // 便捷获取表单控件的语法糖
  get f() { return this.registerForm.controls; }
}

2. HTML模板代码 #

模板通过formGroup绑定表单，用formControlName关联控件，同样根据状态显示图标：

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <!-- 用户名输入框 -->
  <div class="form-group">
    <label>用户名</label>
    <input 
      type="text" 
      class="form-control"
      formControlName="username"
    >
    <span *ngIf="f.username.touched">
      <i class="fa fa-check text-success" *ngIf="f.username.valid"></i>
      <i class="fa fa-times text-danger" *ngIf="f.username.invalid"></i>
    </span>
    <div *ngIf="f.username.invalid && f.username.touched" class="text-danger">
      <small *ngIf="f.username.errors?.required">用户名不能为空</small>
      <small *ngIf="f.username.errors?.minlength">用户名至少3个字符</small>
    </div>
  </div>

  <!-- 密码输入框 -->
  <div class="form-group">
    <label>密码</label>
    <input 
      type="password" 
      class="form-control"
      formControlName="password"
    >
    <span *ngIf="f.password.touched">
      <i class="fa fa-check text-success" *ngIf="f.password.valid"></i>
      <i class="fa fa-times text-danger" *ngIf="f.password.invalid"></i>
    </span>
    <div *ngIf="f.password.invalid && f.password.touched" class="text-danger">
      <small *ngIf="f.password.errors?.required">密码不能为空</small>
      <small *ngIf="f.password.errors?.minlength">密码至少6个字符</small>
    </div>
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="!registerForm.valid">注册</button>
</form>

关键知识点说明 #

• 控件核心状态：
  • touched：用户点击过输入框并离开
  • dirty：用户修改过输入框内容
  • valid：控件符合所有校验规则
  • invalid：控件不符合至少一条校验规则
    你可以根据需求选择用touched（离开后显示）或dirty（输入时就显示）触发图标
• 自定义校验：如果需要特殊规则（比如用户名不能含特殊字符），可以在TS中定义自定义校验函数，添加到控件的校验数组即可
• 图标替代：不用Font Awesome的话，直接替换<i>标签为✓/✗或者自定义SVG元素就行

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