子组件中的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

我知道有两种方法可以实现这种行为，一种是 Sofia 在上面的答案中提到的，第二种方法是传递formControl给子组件！

父组件 HTML 内部

<child-component
   [control]="parentForm.get('form-control-name-you-want-to-pass-down')">
</child-component>

里面child-component

@Input() control: AbstractControl = new FormControl();

子组件 HTML 内部

<input [formControl]="control" />

Answer 2

您需要在子组件中实现控制值访问器，请在此处阅读更多内容https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Answer 3

就像@MassimoVariolo 的文章提到的那样，您可以将表单作为输入传递给子组件。

父组件html：

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

子组件 ts 文件：

@Input() public form: FormGroup;

子组件 html（你需要 div 和formGroup，否则你会得到一个错误）：

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