如何在Angular中设置可选/条件性的formControlName？

问题背景 #

我开发了一批包含原生HTML表单元素的自定义组件，需要让它们既能配合Angular响应式表单（ReactiveForms）使用（此时需指定formControlName），也能单独使用（此时不需要该属性）。目前已经通过配置viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]实现了响应式表单的父容器关联，但卡在了**条件性设置formControlName**的问题上——Angular不允许给formControlName绑定空字符串、null或false，直接这么写会报错。

尝试过的无效方案 #

1. 三元表达式绑定空值/Null/False

<input [formControlName]="(isSomething) ? 'my-name' : ''" />
<input [formControlName]="(isSomething) ? 'my-name' : null" />
<input [formControlName]="(isSomething) ? 'my-name' : false" />

以上写法均会触发Angular的表单校验报错。

2. 使用[attr.formControlName]绑定空值

<input [attr.formControlName]="" />

渲染后会生成小写的formcontrolname=""，无法被FormGroup识别，完全无效。

3. 尝试条件式属性添加（伪代码）

<input
  id="stuff-1"
  class="stuff"
  (cond === true) [formControlName]="my-name" // 仅当条件为真时添加
  (cond === false) // 不添加该属性
/>

这种写法不符合Angular的模板语法规则，无法生效。

4. 临时可行但冗余的方案：*ngIf拆分组件

<ng-container *ngIf="!useReactiveForm">
  <input
     id="stuff-1"
     class="stuff"
  />
</ng-container>

<ng-container *ngIf="useReactiveForm">
  <input
    id="stuff-1"
    class="stuff"
    [formControlName]="name"
  />
</ng-container>

虽然能实现需求，但需要重复编写相同的输入框代码，不够优雅。

最终解决方案 #

因为自定义组件已经实现了ControlValueAccessor，核心思路是把formControlName的条件判断移到自定义组件的外层（父组件中），组件内部的原生输入框只负责值的同步：

1. 父组件中根据场景决定是否给自定义组件添加formControlName：

   • 响应式表单场景：<custom-form-element [formControlName]="'username'"></custom-form-element>
   • 单独使用场景：<custom-form-element></custom-form-element>

2. 自定义组件内部的原生输入框，通过事件触发值变更，无需绑定formControlName：

<input
  id="stuff-1"
  class="stuff"
  [value]="innerValue"
  (input)="handleInput($event.target.value)"
/>

在组件类中实现handleInput方法，同步值并调用ControlValueAccessor的onChange回调：

handleInput(value: string) {
  this.innerValue = value;
  this.onChange(value); // ControlValueAccessor 定义的回调函数
}

这种方式既满足了两种使用场景的需求，又避免了Angular对formControlName的严格校验，同时不需要重复编写组件代码。

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