如何在组件外使用提交按钮并实现模板驱动表单验证（无form标签）

核心思路 #

因为没使用<form>标签，无法借助NgForm统一管理表单状态，所以需要手动收集所有带ngModel的控件的验证状态，通过监听这些状态的变化来判断整个表单是否有效，进而控制外部按钮的禁用/启用。

实现步骤 #

1. 给每个表单控件绑定ngModel并添加模板引用
   每个需要验证的控件都要绑定ngModel，同时添加模板引用变量获取ngModel实例（格式为#xxx="ngModel"），并且必须设置name属性（ngModel依赖该属性注册）：

   <!-- 姓名输入框，必填且最少2个字符 -->
   <input 
     type="text" 
     name="firstname" 
     #firstname="ngModel" 
     ngModel 
     required 
     minlength="2"
   >
   <div *ngIf="firstname.invalid && firstname.touched">请输入至少2个字符的姓名</div>
   
   <!-- 邮箱输入框，必填且符合邮箱格式 -->
   <input 
     type="email" 
     name="email" 
     #email="ngModel" 
     ngModel 
     required 
     email
   >
   <div *ngIf="email.invalid && email.touched">请输入有效的邮箱地址</div>
   

2. 组件类中收集所有NgModel实例并监听状态
   使用@ViewChildren(NgModel)获取页面中所有的NgModel控件实例，通过RxJS的combineLatest合并所有控件的状态变化流，判断所有控件是否都处于有效状态：

   import { Component, ViewChildren, QueryList, NgModel, AfterViewInit } from '@angular/core';
   import { combineLatest, map } from 'rxjs';
   
   @Component({
     selector: 'app-custom-form',
     templateUrl: './custom-form.component.html'
   })
   export class CustomFormComponent implements AfterViewInit {
     @ViewChildren(NgModel) formControls!: QueryList<NgModel>;
     isFormValid$!: Observable<boolean>;
   
     ngAfterViewInit(): void {
       // 合并所有控件的状态变化流，实时判断整体有效性
       this.isFormValid$ = combineLatest(
         this.formControls.map(control => control.statusChanges!)
       ).pipe(
         map(statuses => statuses.every(status => status === 'VALID'))
       );
     }
   }
   

3. 绑定外部提交按钮的禁用状态
   使用async管道订阅isFormValid$流，动态控制按钮的disabled属性：

   <!-- 组件外的提交按钮 -->
   <button [disabled]="!(isFormValid$ | async)">提交表单</button>
   

关键细节 #

• 所有带ngModel的控件必须设置name属性，否则NgModel无法正常注册和工作
• statusChanges是NgModel提供的Observable，会在控件验证状态变化时发出新值
• 使用@ViewChildren而非@ViewChild，因为要获取多个控件实例；如果是动态添加的控件，QueryList会自动更新
• 初始状态下按钮会保持禁用，直到所有控件都通过验证

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