热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

我试图将formControlName以角度形式传递给子组件,但在绑定表单时遇到了一些问题,请找到以下代码片段

data-table.html(parentcomponent)这是父组件,我将在其中使用一些

data-table.html (parent component)

这是父组件,我将在其中使用一些通用组件,并且我想将该组件绑定到反应形式。
    ```->
    

      开始编辑以查看发生了一些魔术:)
    







No.

{{element.position}}





Name

{{element.name}}
[fieldFormGroup]="userForm">




Weight

{{element.weight}}





Symbol

{{element.symbol}}







{{userForm.value | json}}




```
custom-dropdown.component.html (child component)

这是通用组件,其中我从父组件获取formGroup和formControl并将其绑定到模板,如建议的

```





``
custom-dropdown.component.ts
```
import { Component,OnInit,Input } from "@angular/core";
@Component({
selector: "app-custom-dropdown",templateUrl: "./custom-dropdown.component.html",styleUrls: ["./custom-dropdown.component.scss"]
})
export class CustomDropdownComponent implements OnInit {
constructor() {}
@Input() fieldControlName;
@Input() fieldIndex;
@Input() fieldFormGroup;
cities = [
{ id: 1,name: "Hydrogen" },{ id: 2,name: "Helium" },{ id: 3,name: "Pavilnys",disabled: true },{ id: 4,name: "Lithium" },{ id: 5,name: "Oxygen" }
];
ngOnInit() {
console.log(this.fieldControlName);
console.log(this.fieldIndex);
}
}
```
when i am trying to execute this code i am getting the below error
**ERROR Error: Cannot find control with name: 'fieldControlName'
at _throwError (forms.js:3357)
at setUpControl (forms.js:3181)
at FormGroupDirective.addControl (forms.js:7345)
at FormControlName._setUpControl (forms.js:8070)
at FormControlName.ngOnChanges (forms.js:7993)
at checkAndUpdateDirectiveInline (core.js:31906)
at checkAndUpdateNodeInline (core.js:44367)
at checkAndUpdateNode (core.js:44306)
at debugCheckAndUpdateNode (core.js:45328)
at debugCheckDirectivesFn (core.js:45271)
**
Please help me in which part i am doing mistakes here..


您需要更改模板以使其成为属性绑定表达式,而不是字符串值分配:





formCOntrolName="fieldControlName"这将分配给formControlName属性"fieldControlName"字符串文字。

[formControlName]="fieldControlName"会将formControlName属性绑定到fieldControlName属性。

编辑:
修复模板中的formControlName绑定。您只需要传递controlName就足以使其正常工作。

[fieldFormGroup]="userForm">

这一次,我们将使用字符串分配代替属性绑定。您无需显式地找到绑定它的确切控件。


上面的行已经指定了formGroupName。因此,此组件的子代将知道它属于哪个formGroum。


推荐阅读
  • 导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细]
  • ASP.NET2.0数据教程之十四:使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观,与GridView和DetailsView不同,FormView使用模板来呈现,可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 展开全部下面的代码是创建一个立方体Thisexamplescreatesanddisplaysasimplebox.#Thefirstlineloadstheinit_disp ... [详细]
  • 拥抱Android Design Support Library新变化(导航视图、悬浮ActionBar)
    转载请注明明桑AndroidAndroid5.0Loollipop作为Android最重要的版本之一,为我们带来了全新的界面风格和设计语言。看起来很受欢迎࿰ ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 本文介绍了PE文件结构中的导出表的解析方法,包括获取区段头表、遍历查找所在的区段等步骤。通过该方法可以准确地解析PE文件中的导出表信息。 ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • 本文介绍了如何使用vue-awesome-swiper组件,包括在main.js中引入和使用swiper和swiperSlide组件,以及设置options和ref属性。同时还介绍了如何在模板中使用swiper和swiperSlide组件,并展示了如何通过循环渲染swipes数组中的数据,并使用picUrl属性显示图片。最后还介绍了如何添加分页器。 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • 本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术,避免使用内联样式和固定定位,实现了一个标准的页眉页脚布局。提供了一个替代的解决方案,为读者提供了参考。 ... [详细]
author-avatar
童T-Aurora
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有