在 Angular 中，可以使用模板驱动表单或响应式表单来实现表单控件验证。下面是关于模板驱动表单和响应式表单的示例代码：

1. 模板驱动表单：

在模板驱动表单中，可以使用 Angular 内置的验证器或自定义验证器来验证表单控件的值。

  
  

    
用户名是必填项。
    
用户名至少需要 4 个字符。
    
用户名不能超过 10 个字符。
  
  提交

在上述示例中，ngModel 指令用于绑定表单控件的值到组件中，required、minlength 和 maxlength 是 Angular 内置的验证器。myForm.controls.username.invalid 用于判断控件是否无效，myForm.controls.username.dirty 和 myForm.controls.username.touched 用于判断控件是否被修改过或触摸过。

2. 响应式表单：

在响应式表单中，可以使用 Validators 类中的静态方法来创建验证器函数，并将其应用到表单控件上。

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

@Component({
  selector: 'app-my-form',
  template: `
    

      
      

        
用户名是必填项。
        
用户名至少需要 4 个字符。
        
用户名不能超过 10 个字符。
      
      提交
    
  `
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]]
    });
  }

  onSubmit() {
    // 处理表单提交逻辑
  }
}

在上述示例中，FormGroup 表示整个表单，FormControl 表示一个表单控件。formControlName 指令用于将表单控件绑定到 FormGroup 中的相应控件名。hasError 方法用于判断控件是否包含特定的错误。

以上是关于 Angular 表单控件验证的简单示例代码，你可以根据具体的需求进行修改和扩展。