Angular嵌套表单控件用法：子组件封装与无障碍适配问题咨询

嵌套form元素的可访问性影响 #

• 首先HTML官方规范明确禁止<form>元素嵌套，浏览器解析DOM时会自动移除内层嵌套的<form>标签，你第一种方案里子组件单独写的<form>标签实际不会生效，还会导致DOM结构和你预期不一致。
• 可访问性层面：屏幕阅读器依赖原生form的语义识别表单结构、关联表单控件与label、识别提交逻辑。被浏览器篡改后的异常form结构会导致屏幕阅读器无法正确识别表单层级，出现控件所属表单识别错误、提交按钮关联异常、表单状态播报失效等问题，直接影响可访问性达标。

两种实现方案的调整建议 #

方案一：传入FormGroup实例（无嵌套form版本） #

你可以调整第一种方案的写法，子组件不新增独立<form>标签，仅接收父组件传入的FormGroup实例绑定内部控件，完全不会产生嵌套form问题：

// 子组件TS代码
@Input() detailFormGroup: FormGroup;

<!-- 子组件HTML代码，无需新增form标签 -->
<div [formGroup]="detailFormGroup">
  <mat-form-field>
    <mat-label>字段名</mat-label>
    <input matInput formControlName="xxx">
  </mat-form-field>
</div>

• 适用场景：子组件仅在当前项目的当前表单内使用，不需要独立复用
• 优势：开发成本极低，语义结构符合标准，不会产生可访问性问题

方案二：子组件实现ControlValueAccessor #

将子组件封装为独立的表单控件，完全和父表单解耦，不需要依赖父组件传入的FormGroup实例：

• 适用场景：子组件需要跨页面、跨项目作为独立表单控件复用
• 优势：完全符合原生表单语义，没有嵌套form风险，可访问性表现最优
• 注意点：需要完整实现ControlValueAccessor的writeValue、registerOnChange、registerOnTouched、setDisabledState四个方法，同时要处理好子组件内部控件的无障碍属性绑定。

选型建议 #

如果没有跨场景复用的需求，优先选择调整后的方案一即可满足可访问性要求，开发效率更高；如果有复用需求，选择方案二即可。

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