gpt4 book ai didi

angular - 将自定义组件添加到响应式表单的 FormGroup 的正确方法是什么?

转载 作者:行者123 更新时间:2023-12-03 23:53:54 24 4
gpt4 key购买 nike

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

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

我有一个 StackBlitz

但是当我将自定义组件嵌套在 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

只是对设计的方式感到困惑。

我的组件包装了 angular material 的 mat-select,如果我需要在 mat-select 上放置属性或让我的组件实现控制值访问器,我想我也很困惑?似乎没有任何效果。

最佳答案

控制formControlName必须是字符串值。

情况1

formControlName="animationType"

此工作自 animtationType这里是字符串值。

案例二
[formControlName]="'animationType'" 

这是抛出错误,因为 Angular 正在评估 animationType 的值这是一个数组(在 ts 文件中定义)

案例3
formControlName="{{animationType}}" 

这与案例 2 的原因相同

使固定

如果要访问 formControlName 然后在 ts 中使用字符串值
前任 :

** 在 ts **
public animationControl = "animation";

** 在 html 中 **
<mat-select name="animationType" [formControlName]="'animationControl'" 

关于angular - 将自定义组件添加到响应式表单的 FormGroup 的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52862840/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com