Angular子表单字段验证问题：自定义组件输入未触发原生验证

既然你不想全盘切换到Angular表单，也接受原生验证的通用提示，那可以试试这几个轻量的方案：

方案一：让自定义组件兼容原生约束验证API #

原生表单验证是基于浏览器的约束验证API工作的，我们可以让自定义组件适配这个API，这样浏览器就能自动识别它的必填状态：

• 给你的balls组件的宿主元素添加required属性，同时在组件类里实现checkValidity()和reportValidity()方法，还有validity属性：

  export class BallsComponent implements OnInit {
    @Input() required = false;
    @ViewChild('inputElement') inputElement: ElementRef; // 假设组件内部有原生输入框
  
    get validity(): ValidityState {
      return this.inputElement.nativeElement.validity;
    }
  
    checkValidity(): boolean {
      if (this.required && !this.inputElement.nativeElement.value) {
        this.inputElement.nativeElement.setCustomValidity('请填写此字段');
        return false;
      }
      this.inputElement.nativeElement.setCustomValidity('');
      return true;
    }
  
    reportValidity(): boolean {
      return this.inputElement.nativeElement.reportValidity();
    }
  }
  

• 在模板里使用组件时加上required：

  <balls required></balls>
  

这样表单提交时，浏览器会自动调用组件的checkValidity，空值时就会触发和原生输入框一样的提示。

方案二：拦截表单提交事件手动校验 #

如果不想修改组件代码，可以在表单的提交事件里手动检查自定义组件的值：

• 给表单添加ngSubmit事件处理器：

  <form (ngSubmit)="onSubmit($event)">
    <balls #ballsComp></balls>
    <button type="submit">提交</button>
  </form>
  

• 在组件类里实现提交逻辑，先校验自定义组件：

  @ViewChild('ballsComp') ballsComp: BallsComponent;
  
  onSubmit(event: Event) {
    // 假设balls组件有一个value属性获取输入值
    if (!this.ballsComp.value) {
      event.preventDefault();
      // 模拟原生提示：可以找到组件内的原生输入框调用reportValidity
      const nativeInput = this.ballsComp.el.nativeElement.querySelector('input');
      if (nativeInput) {
        nativeInput.setCustomValidity('请填写此字段');
        nativeInput.reportValidity();
        nativeInput.setCustomValidity(''); // 重置状态
      }
      return;
    }
    // 正常提交逻辑
  }
  

这个方法不用改组件内部，只在使用的地方加校验，适合快速解决问题。

方案三：给自定义组件加简单的模板驱动验证指令 #

写一个轻量的required指令，专门作用于balls组件，不用引入完整的Angular表单模块：

• 创建指令：

  @Directive({
    selector: 'balls[required]',
    providers: [{ provide: NG_VALIDATORS, useExisting: BallsRequiredDirective, multi: true }]
  })
  export class BallsRequiredDirective implements Validator {
    @Input() required: boolean;
  
    validate(control: AbstractControl): ValidationErrors | null {
      // 假设balls组件的value绑定到了control的value
      return (this.required && !control.value) ? { required: true } : null;
    }
  }
  

• 在使用组件时，确保组件的value和表单的ngModel绑定：

  <form #myForm="ngForm">
    <balls required [(ngModel)]="ballsValue" name="balls"></balls>
    <button type="submit" [disabled]="myForm.invalid">提交</button>
  </form>
  

这个方案利用Angular的验证机制，但不用重构整个表单，只是给单个组件加验证，提交时表单会自动识别无效状态，阻止提交。

这几个方案都不用你全盘切换到Angular表单，选最适合你现有代码结构的就行～

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