背景与挑战

在Angular开发中，我们经常会遇到这样的场景：一个组件（子组件）负责渲染表单或输入控件，而提交按钮却位于其父组件中，或者完全独立于该表单组件。此时，我们需要根据子组件内部表单或控件的验证状态来控制外部提交按钮的启用（enabled）或禁用（disabled），以确保只有当所有输入都有效时才能提交数据。尤其当子组件内部不直接使用标准的HTML

Angular提供了一种强大的机制——模板引用变量（Template Reference Variables）结合 @ViewChild 装饰器——来解决这类跨组件的通信和状态同步问题。下面将介绍两种实现此功能的主要方法。

方法一：通过NgForm管理表单级验证（适用于包含

尽管原始问题提到不使用

AI视频剪辑工具

子组件内部实现

首先，在子组件的模板中，为

子组件模板 (child-form.component.html)：

<form #form="ngForm">
  <label for="firstName">姓氏:</label>
  <input type="text" id="firstName" name="firstName" [(ngModel)]="firstName" #firstNameID="ngModel" required minlength="2">
  <div *ngIf="firstNameID.invalid && (firstNameID.dirty || firstNameID.touched)" class="error-message">
    <div *ngIf="firstNameID.errors?.['required']">姓氏是必填项。</div>
    <div *ngIf="firstNameID.errors?.['minlength']">姓氏至少需要2个字符。</div>
  </div>

  <label for="lastName">名字:</label>
  <input type="text" id="lastName" name="lastName" [(ngModel)]="lastName" #lastNameID="ngModel" required>
  <div *ngIf="lastNameID.invalid && (lastNameID.dirty || lastNameID.touched)" class="error-message">
    <div *ngIf="lastNameID.errors?.['required']">名字是必填项。</div>
  </div>
</form>

**子组件 TypeScript (`child