angular - 子组件中的 formControlName

Question

我想创建一个自定义输入组件并在我的表单中重用它，但我遇到了 formGroup 和 formControlName 的问题。

// Form
<form [formGroup]='loginForm'>
  <custom-input [myFormControlName]='email'></custom-input>
</form>

// CustomInput Component's Template
<input formControlName='myFormControlName'>

问题似乎是 formControlName 期望与 FormGroup 指令一起使用，并且由于我在子组件中使用 formControlName 它找不到 formControlName..任何人都知道如何解决这个问题？

Answer 1

喜欢@MassimoVariolo 的 article提及，您可以将表单作为输入传递给子组件。

父组件html:

<child-component [form]="form"></child-component>

子组件ts文件:

@Input() public form: FormGroup;

子组件html(你需要带有formGroup的div，否则会报错):

<div [formGroup]="form">
    <input formControlName="myFormControlName"> 
</div>