如何在子组件中使用 formControlName 然后在父组件中获取它的值？

Question

所以基本上我创建了我自己的组件，该组件是可过滤选择的，带有将新项目添加到pickListItems 的选项。问题是我想将输入值作为 formControl，但即使我将 formGroup 传递给孩子，我也会遇到错误。

所以示例代码如下所示：

<form [formGroup]="formGroup">
  some stuff here to generate form fields, one of fields is my component with 
  select:
  <app-add-picklist
    [field]="field"
    [formControlName]="field.Label"
    [formGroup]="formGroup">
</app-add-picklist>
<form>

在add-picklist 组件中我有：

@Input() formGroup: FormGroup;
@Input() formControlName: string;
@Input() field: any;

在 ngOnInit 中：

ngOnInit() {
 this.formGroup.addControl(this.formControlName, new FormControl());
}

还有模板（部分）：

<input type="text"
   class="form-control"
   placeholder="Pick one"
   aria-label="Number"
   matInput
   [formControlName]="formControlName"
   [matAutocomplete]="auto">

所以我不断收到错误

No value accessor for form control with name: xxxx. 
Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).

我明白这意味着什么，但不知道在这种情况下如何处理它..

Answer 1

您不能使用自定义 @Input formControlName，因为 Angular 也尝试使用它。
如果你重命名它会起作用（formGroup 也一样）

@Input() formGroupParent: FormGroup;
@Input() formControlNameParent: string;

那么，您不能使用[formControlName]，因为父表单不在同一个 HTML 代码中（它在父表单中）。
相反，请使用[formControl]="formGroupParent[formControlNameParent]"

此外，输入必须有名称。必须添加它，并且添加一个 *ngIf，因为名称是 @Input()，并且对于某些毫秒（构造函数和触发 ngOnInit 之间的时间）将为空...

<input *ngIf="formGroupParent && formControlNameParent" 
   type="text"
   [name]="formControlNameParent"
   class="form-control"
   placeholder="Pick one"
   aria-label="Number"
   matInput
   [formControl]="formGroupParent[formControlNameParent]"
   [matAutocomplete]="auto">