Angular Material响应式表单验证：无法同时设置必填与最大长度校验

你的问题出在FormControl验证器的传递方式上。当需要给单个表单控件设置多个验证规则时，必须把所有验证器放进一个数组里，而不是作为单独参数传递。你当前的写法里，Validators.required会被FormControl构造函数忽略，所以只有maxLength验证生效，required校验没起作用。

修正后的组件代码 #

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
  profileForm = new FormGroup({
    // 把多个验证器放进数组中
    firstName: new FormControl('', [Validators.maxLength(1), Validators.required]),
    email: new FormControl('', Validators.email),
  });

  constructor() { }

  ngOnInit(): void {
  }

  onSubmit() {
    console.warn(this.profileForm.value);
  }

  testForm(){
    const emailControl = this.profileForm.get('email');
    if (emailControl?.valid){
      alert('邮箱格式正确');
    }
  }

  save(){
    const email = this.profileForm.get('email')?.value;
    if(email?.trim() !== '' ){
      alert('邮箱已填写');
    }
  }
}

关键说明 #

• FormControl构造函数的第二个参数类型是 ValidatorFn | ValidatorFn[] | null，多个验证器必须用数组包裹，这样Angular才会依次执行所有验证规则。
• 额外优化了代码里的可选链操作符（?.）和空值判断，避免出现null/undefined报错。

模板中显示验证错误（可选） #

如果需要在页面上提示用户验证失败的信息，可以在对应的模板文件（form.component.html）中添加以下内容：

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <div>
    <label>
      名字:
      <input type="text" formControlName="firstName">
    </label>
    <!-- 显示必填错误 -->
    <div *ngIf="profileForm.get('firstName')?.hasError('required') && profileForm.get('firstName')?.touched">
      名字不能为空
    </div>
    <!-- 显示长度超限错误 -->
    <div *ngIf="profileForm.get('firstName')?.hasError('maxlength') && profileForm.get('firstName')?.touched">
      名字最多只能输入1个字符
    </div>
  </div>

  <div>
    <label>
      邮箱:
      <input type="email" formControlName="email">
    </label>
    <div *ngIf="profileForm.get('email')?.hasError('email') && profileForm.get('email')?.touched">
      请输入有效的邮箱地址
    </div>
  </div>

  <button type="submit" [disabled]="!profileForm.valid">提交</button>
  <button type="button" (click)="testForm()">测试邮箱验证</button>
  <button type="button" (click)="save()">保存</button>
</form>

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