Angular动态绑定原生input的form属性报错，如何解决？

问题原因 #

Angular的方括号[]绑定默认针对DOM元素的property（属性），而原生HTML的form是一个attribute（特性），并非input元素的DOM property。直接用[form]="dynamicVariable"时，Angular会误以为你要绑定input组件的输入属性，但input并没有这个输入属性，因此抛出Can't bind to 'form' since it isn't a known property of 'input'错误。

硬编码form="my-form-id"能正常工作，是因为这种写法是直接设置HTML特性，Angular不会将其识别为组件输入属性。

解决方案 #

使用Angular的特性绑定语法，通过[attr.form]来动态绑定原生HTML的form特性：

1. 在组件类中定义动态变量：

dynamicFormId = 'my-form-id';

2. 在模板中使用特性绑定：

<!-- 外部表单 -->
<form id="my-form-id">
  <button type="submit">提交</button>
</form>

<!-- 动态绑定form特性的input -->
<input [attr.form]="dynamicFormId" type="text" placeholder="输入内容" />

这样设置后，input元素就能正确关联到指定的外部表单，效果和硬编码完全一致。

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