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

您需要在子组件中实现control value accessor，请在此处阅读https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Answer 2

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

父组件html：

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

子组件ts文件：

@Input() public form: FormGroup;

子组件html（您需要带formGroup的div，否则会出现错误）：

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

Answer 3

我知道实现这种行为的两种方法，一种是 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 4

您可以考虑阅读以下有用的文章：Using Child Components in Angular Forms

解决方案的核心是将formGroup实例传递给子组件，并将其与formGroup自身包装在一起。

子组件中的formControlName

4 个答案: