Question

在包裹mat-select的自定义组件上使用formControlName时遇到很多问题。

现在看来我的自定义控件找不到表单组了吗？即使自定义元素嵌套在formGroup下。

但是，当我将自定义组件嵌套在formGroup下时，就会出现问题，所有其他控件都可以找到formGroup，但我的自定义组件似乎无法。

<form novalidate [formGroup]="tenantForm">
    <label for="Id">Id</label>: <input class="form-control" formControlName="id" id="Id" name="Id" />
    <custom-component-with-mat-select formControlName="culture" id="Culture" name="Culture"></custom-component-with-mat-select>
</form>

在此示例中，Id字段可以正常工作，但是Culture字段抱怨未嵌套在FormGroup中？

错误：formControlName必须与父formGroup指令一起使用。您将要添加一个formGroup 指令并将其传递给现有的FormGroup实例（您可以在类中创建一个）。

自定义组件应如何与反应式表单和表单组一起使用？

我最初的问题是不记得要导入ReactiveFormsModule ..也许我忘记了再次导入某些内容？

这是answer的设计方法吗？还是我缺少一个更简单的解决方案？

我需要实现一个控制值访问器吗？如here

所述

只是对设计方法感到困惑。

我的组件包装了角材料的mat-select，如果我需要在mat-select上放置属性还是让我的组件实现控制值访问器，我想我也很困惑。似乎没有任何效果。

Answer 1

控件formControlName必须是字符串值。

案例1

formControlName="animationType"

从animtationType开始的工作在这里是字符串值。

案例2

[formControlName]="'animationType'"

这是引发错误，因为Angular正在评估animationType的值，该值是一个数组（在ts文件中定义）

案例3

formControlName="{{animationType}}"

这与案例2的原因相同

修复

如果要访问formControlName，请在ts中使用字符串值例如：

** in ts **

public animationControl = "animation";

** in html **

<mat-select name="animationType" [formControlName]="'animationControl'"

Answer 2

我做了一些研究，并使其与控制值访问器一起工作：

https://stackblitz.com/edit/mat-select-with-controlvalueaccessor

Answer 3

我使用参数“ formControl”而不是“ formControlName”解决了该问题，如下所示： input-date.compoenent.html

<p-calendar [formControl]="control"></p-calendar>

parent.component.html

<input-date [control]="formGroup.controls.date"></input-date>

其中控件是input-date.component的输入：

@Input() control: FormControl;

将自定义组件添加到反应形式的FormGroup的正确方法是什么？

3 个答案:

案例1

案例2

案例3

修复