Angular 5响应式表单验证前自动标记必填FormControl方案问询

当然有办法实现这个需求！而且完全能满足你「保持模板简洁」的要求——毕竟你的模板是自动生成的，我们肯定不想手动去改每一个表单控件。下面给你推荐最适合的解决方案：

方案一：自定义指令（推荐） #

我们可以写一个Angular自定义指令，自动检测带有formControlName的输入框对应的FormControl是否包含必填校验器，如果有，就给输入框添加required属性或类。这样完全不用修改生成的模板，一劳永逸。

1. 创建自定义指令 #

import { Directive, ElementRef, OnInit } from '@angular/core';
import { FormControlName, FormControl } from '@angular/forms';

@Directive({
  selector: '[formControlName]'
})
export class AutoRequiredDirective implements OnInit {
  constructor(
    private el: ElementRef,
    private formControlName: FormControlName
  ) {}

  ngOnInit() {
    const control = this.formControlName.control as FormControl;
    // 检查当前FormControl是否包含必填校验器
    const hasRequiredValidator = this.checkForRequiredValidator(control);

    if (hasRequiredValidator) {
      // 二选一：添加required属性，或者添加required类
      this.el.nativeElement.setAttribute('required', '');
      // 或者用类：this.el.nativeElement.classList.add('required');
    }
  }

  private checkForRequiredValidator(control: FormControl): boolean {
    if (!control.validator) return false;
    
    // 调用校验器函数，判断是否会返回required错误（以此校验是否包含必填规则）
    const validationResult = control.validator({} as FormControl);
    return validationResult && validationResult['required'] !== undefined;
  }
}

2. 注册指令 #

在你的表单模块（或根模块）的declarations数组里添加这个指令：

import { NgModule } from '@angular/core';
import { AutoRequiredDirective } from './auto-required.directive';

@NgModule({
  declarations: [
    // ...其他组件/指令
    AutoRequiredDirective
  ]
})
export class YourFormModule {}

效果 #

之后所有使用formControlName的输入框，只要对应的FormControl设置了Validators.required，就会自动带上required属性（或类），你的CSS样式会自动生效，完全不用改动生成的模板！

方案二：利用ngClass（不推荐，需修改模板） #

如果因为某些原因不能用指令，也可以通过ngClass动态添加类，但这个方案需要修改模板，对于自动生成的模板来说不够友好：

<input 
  class="form-control" 
  formControlName="name" 
  [ngClass]="{'required': myForm.get('name').validator && myForm.get('name').validator({} as FormControl)?.required}"
>

这种方式需要给每个输入框都添加这段代码，显然不如指令方案高效。

内容的提问来源于stack exchange，提问作者Florian Gössele