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

您需要实施control value accessor in your child component read more here https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Answer 2

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

解决方案的核心是将formGroup实例传递给子组件，并用formGroup自身包裹起来。

Answer 3

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

父组件html:

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

子组件ts文件：

@Input() public form: FormGroup;

子组件html（需要div和formGroup，否则会出错）：

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

Answer 4

我知道有两种方法可以实现这种行为，一种是 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" />

子组件中的 formControlName

formControlName in a children component

angular

angular-reactive-forms