首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在app.module中添加ReactiveFormsModule后,它仍然显示无法绑定到‘formGroup’,因为它不是‘form’Angular 9.1.13的已知属性

在Angular 9.1.13中,当我们在app.module中添加ReactiveFormsModule后,仍然显示无法绑定到'formGroup'的错误,是因为我们没有在组件的模板中引入FormsModule。

FormsModule是Angular中用于处理模板驱动表单的模块,而ReactiveFormsModule是用于处理响应式表单的模块。在使用响应式表单时,我们需要同时引入这两个模块。

要解决这个问题,我们需要在组件的模板中引入FormsModule。在组件的模板文件(通常是以.html为后缀的文件)中,添加以下代码:

代码语言:txt
复制
<form [formGroup]="yourFormGroup">
  <!-- 表单控件 -->
</form>

在上述代码中,yourFormGroup是你在组件中定义的FormGroup对象的名称。确保你已经在组件中正确地定义了FormGroup对象。

另外,还需要确保在组件的.ts文件中正确导入了ReactiveFormsModule:

代码语言:txt
复制
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他模块
    ReactiveFormsModule
  ],
  // 其他配置
})
export class YourModule { }

以上是解决该问题的基本步骤。如果问题仍然存在,可能是由于其他原因导致的。可以检查以下几点:

  1. 确保你的Angular版本是9.1.13或更高版本。
  2. 确保你的组件中正确导入了FormGroup和ReactiveFormsModule。
  3. 确保你的组件模板中正确引入了FormsModule,并且正确绑定了formGroup属性。

希望以上解答对你有帮助。如果你需要了解更多关于Angular的知识,可以参考腾讯云的Angular产品文档:Angular产品文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑挖坑 - 表单控件概览

使用 ngModel 进行模板绑定时,angular form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单带有 ngModel 指令和 name 属性元素,而...name 属性则是 angular 用来注册控件 key,所以表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件状态 表单中使用 ngModel...(12) }); constructor() { } ngOnInit(): void { } } 视图模板,将承接 FormGroup 实例属性通过 formGroup 指令绑定...,通过使用 formGroupName 属性FormGroup 控件组 FormGroup 实例绑定控件上 <form [formGroup]='profileForm' (ngSubmit)...模板驱动表单因为不是直接使用 FormControl 实例,因此这里应该在模板上添加一个自定义指令来完成对于控件数据校验 使用 angular cli 创建一个用来进行表单验证指令 ng

18.9K20

Angular系列教程-第四节

两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,响应式表单,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,html中使用 NgForm 指令将数据和表单进行绑定,使用[(ngModel...)]来将表单数据和和视图进行双向绑定,NgForm 指令为 form 增补了一些额外特性。...结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令,比如ngfor、ngif 属性型指令 — 改变元素、组件或其它指令外观和行为指令,比如ngstyle 6.属性型指令 6.1

2.8K50
  • Angular2 :从 beta release4.0 版本升级总结

    标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器添加服务提供商。 具体请参考官方文档。...formGroup] => 同时module文件需引入FormsModule...组件迁移无法正确订阅事件 原因:angular(v4.0.0)依赖注入,若在不同地方声明provider,则会创建不同实例。...升级angular(v2.4.0)(v4.1.1)版本,左侧导航状态定位失效 原因:升级,router和componenthook顺序调整(仅根据个人观察,未经验证),导致组件状态未能在路由事件结束...11.升级angular(v4.1.1)版本,等带动态src等属性触发error 原因:angular2启用安全无害化处理,为防止XSS等攻击,具体可参考官方文档安全。

    8.2K00

    Angular 结合 NG-ZORRO 快速开发

    思路: 先添加页面 user 用户列表页面,使用 ng-zorro table 组件 用户新增和更改页面可以共用同一个页面,使用 ng-zorro form 组件 页面删除功能直接使用弹窗提示...,使用 ng-zorro modal 组件 对 ng-zorro 组件按需引入 调整路由文件 按照思路,我们得 ng-zorro 引入: // app.module.ts import { ReactiveFormsModule...imports: [ // 是 imports 添加,而不是 declarations 声明 NzTableModule, NzModalModule, NzButtonModule,...然后我们再把相关权限菜单渲染页面 替换成上面的代码,得到基本骨架如下: image.png 完成用户列表 接下来完成用户列表骨架,因为使用了 UI 框架,我么写起来异常方便: 获取用户列表...这两个功能是公用一个表单~ 我们 html 添加: // user-info.component.html <form nz-form [formGroup]="validateForm" class

    1.8K10

    一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    现在,我们CardList中有我们的卡阵列。我们如何显示不是我们目前标记?...但这并不意味着我们失去了访问这种行为机会。我们已经看到并使用了[value]="expression",它将表达式绑定输入元素value属性。...因此,我们只需编写简单代码即可获取我们价值,并将其绑定代码输入值和变量。...让我们看看这是如何实现。我们讨论了State不变性,这意味着我们创建之后不能改变任何属性。这使得我们应用程序状态存储我们系统几乎不可能State。...EffectsModule.forRoot或者不能在我们加载模块工作(因为无处添加延迟加载)。

    42.6K10

    Angular: 最佳实践

    应用程序 tsconfig.json 文件,我们可以设置这个标志,告诉编辑器未明确类型时候抛出错误。否则,编辑器坚定无法推断变量类型,而认为是 any 类型。...并且模版每个地方都会显示通知,你可以使用 ngClass 设置未通知样式。现在,我们想将通知状态与枚举值进行比较,我们必须将枚举导入组件。...Angular 表单,那么将这些逻辑移动到一个基础类会更友好...但是你不需要继承 AbstractBaseComponent,因为不是每个组件都有 form 表单。...,让允许委托任何重复逻辑子组件。...从模版组件方法委托比原始逻辑更难。请注意,这里我用了比原始更难词语,而不是复杂这个词。这是因为除了检查直接条件语句之外,任何逻辑都应该写在组件类方法,而不是写在模版

    2.8K40

    使用Angular8和百度地图api开发《旅游清单》

    3.angular基本语法和架构 1.基本语法 和vue类似,ng基本语法如下: 模版语法 数据指令 属性绑定 事件绑定 案例如下: {{title}} <h2 [title]="mytitle...]<em>绑定</em><em>属性</em>,*ngFor为循环指令,类似的*ngIf为条件判断,事件<em>绑定</em>用(click),我们看看组件<em>的</em>ts文件对应<em>的</em>写法: import { Component } from '@<em>angular</em>/core...,把hasDone为true<em>的</em>数据过滤出来,<em>显示</em><em>在</em>地图上。...= data && data.results; } 复制代码 locationService<em>的</em>addToList方法会将数据<em>添加</em>到清单,并存储<em>到</em>storage<em>中</em>。...如果想了解完整代码,欢迎<em>在</em>我<em>的</em>github上查看。 接下来看看我<em>的</em>大陆页面,其实涉及<em>的</em>难点<em>不是</em>很多,主要是根据hasDone为true或false去<em>显示</em>不同<em>的</em>样式。

    6K30

    Angular8稳定版修改概述

    不是完全正常运行(选择预览),正如Igor MinarngConf 2019建议那样,视图引擎仍然推荐用于新应用。...目前,处于“选择预览”模式。 Bazel可作为选择加入,预计将包含@angular/cli第9版。...之前我们不得不使用下面的代码片段来实现相同功能: validateFormAndDisplayErrors(form: FormGroup) { Object.keys(form.controls...@angular/http @angular/httpAngular 5不推荐使用package,但由于@angular/platform-server依赖于,所以仍然可用。...它们将在变更检测运行解析。 需要注意是,设置static: true将不允许您从动态模板分辨率(例如*ngIf)获得结果。 添加了原理图支持以将现有代码迁移到此语法,因为将使用此语法Ivy 。

    4.5K20

    理论 | Angular 响应式编程 -- 浅淡 Rx 流式思维

     Rx--隐藏在Angular 2.x利剑 一文我们已经初步了解了 Rx 和 Rx Angular 应用。 今天我们一起通过一个具体例子来理解响应式编程设计思路。...其实就是考虑幼儿情况啦。 3、填年龄时,出生日期随之变化,因为无法精确,所以只需精确选择单位即可。...Angular 处理响应式表单只有 3 个步骤: 1、组件 HTML 模版给要处理控件加上 formControlName="blablabla" 2、form 标签添加 [formGroup...]="xxx" 指令,这个 xxx 就是你组件声明 FormGroup 类型成员变量:比如下面代码 form: FormGroup; 3、组件构造函数取得 FormBuilder (...这个 else 可以携带一个模版引用。比如下面例子:如果用户登录成功显示用户名,否则显示登录链接。 另一个改进是 ngIf 现在可以将评估表达式结果赋值给一个变量,好处是什么呢?

    5.3K10

    AngularDart4.0 指南- 模板语法二 顶

    如果名称未能匹配已知指令元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 事件绑定Angular为目标事件设置了一个事件处理程序。...您不需要为您编写Angular组件添加值存取器,因为您可以将值和事件属性命名为适合Angular基本双向绑定语法,并完全跳过NgModel。上面显示sizer是这种技术一个例子。...例如,重新查询服务器可能会重置所有新英雄对象列表。 大多数,如果不是全部,以前显示英雄。 你知道这一点,因为每个英雄ID没有改变。 但是Angular只能看到新对象引用列表。...绑定[ngSwitch]。 如果您尝试设置*ngSwitch,则会出现错误,因为NgSwitch是一个属性指令,而不是结构指令。 改变了其同伴指令行为。 它不直接操作DOM。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道是一个很好选择。 管道是简单函数,接受一个输入值并返回一个转换值。

    30K20

    AngularDart4.0 指南- 模板语法一 顶

    {{1 + 1}}内插大括号包围模板表达式1 + 1.在下面的属性绑定部分[property] =“expression”,模板表达式显示符号右侧引号。...幂等性 幂等表达式是理想因为没有副作用,并且改善了Angular变化检测性能。 对Angular来说,一个幂等表达式总是返回完全相同东西,直到一个依赖值发生变化。...您不能使用属性绑定将值从目标元素拉出。 您不能绑定目标元素属性来读取。 你只能设置。 同样,您不能在目标元素上使用属性绑定来调用方法。...表达式语言本身是为了保证您安全。您不能为属性绑定表达式任何东西赋值,也不能使用增量和减量运算符。 当然,该表达式可能会调用具有副作用属性或方法。 Angular无法知道或阻止你。...它在显示它们之前清理这些值。 它不允许带脚本标记HTML泄露浏览器,既不能使用插值也不能使用属性绑定。 <!

    5.2K10

    AngularDart4.0 指南- 表单 顶

    顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面输入和输出属性)来绑定父组件。 这不是现在问题,这些未来变化不会影响表单。...您将在表单添加一个select,并使用ngFor(先前显示数据”页面中看到一种技术)将选项绑定powers列表。...p模板输入变量每次迭代是不同power; 您使用插值语法显示其名称。 与ngModel双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定英雄。...靠近表单顶部诊断确认所有的更改都反映在model。 从模板删除诊断绑定因为已经达到了目的。 根据控制状态给出视觉反馈 使用CSS和类绑定,您可以更改表单控件外观以反映其状态。...英雄Alter Ego是可选,所以你可以不用关那个。 英雄power选择是必需。 如果需要,可以将相同类型错误消息添加,但这不是必须因为选择框已经将权限限制为有效值。

    17.5K30

    当nz-checkbox-group多选框组遇上必选校验

    ,4、false 选择一个选项:1、true,2、false,3、oneOption值+选中value,4、false 从而始终无法触发显示 “通知范围必选” 第一次尝试 最开始尝试是将this.validateForm.value.scopes...再次尝试 这曾一度想过放弃然后自己用原始方式写,再一想到原始方式还要自己考虑样式什么,作为一个有着css恐惧症Java程序猿我决然地选择了硬着头皮啃会儿。...刷了n+1遍ng-zorro-antd官方文档表单部分“自定义异步校验”中看到这样一句话 : 当使用 响应式表单(Reactive Form) 时, ...nzValidateStatus 会自动从 NgControl 获取数据,也可以手动指定特定 NgControl组件将表单校>验函数校验过程和异步返回结果显示对应error | validating...于是有了如下终极解决方案: 问题.html不用做修改。 问题.ts修改如下: //因为不想在提交方法_submitForm()再循环一遍获取多选结果,就只好在这先定义一个临时用于存储选择结果。

    4.4K20

    用VSCode开发一个基于asp.net core 2.0sql server linux(docker)ng5bs4项目(2)

    这可能不是我们想要, 所以就需要为Domain Model相应属性添加一些约束....执行成功, 可以看到表字段约束已经添加成功了: ? 为数据库添加种子数据. 添加种子数据方法有很多, 可以写一个方法然后Startup里面调用....确实是发生了异常, 因为一个Tvnetwork有个导航属性是多个TvShow, 而一个TvShow还有一个反向导航属性是TvNetwork, 所以dbcontext查询出来进行json转化时候, 会无限循环下去...接下来需要做就是Controller里面把Domain Model属性传递给ViewModel, 没人会去手写这个映射过程, 所以应该使用AutoMapper等类似的库 AutoMapper 首先添加...如果您跟着这两篇文章做到现在, 肯定可以感觉vscode强大和不同, 绝不仅仅是个编辑器.

    2.4K50

    Angular CLI 简介

    然后我试试添加一个component, 目的是要在login module进行声明: 可以看到我要创建welcome component默认是app.module里面进行声明, 这时候如果想要在...默认情况下, 输出目录在.angular-cli.json文件里ourDir属性配置, 默认是/dist目录. build之后会看见dist里面有这些文件: inline.bundle.js 这是...而且它还会检测文件变化, 如果文件有变化, 那么它会重新执行测试. 应该在单独终端进程执行. ...可以看一下spec list: 这时因为运行测试时候, admin模块是独立运行, 所以该模块并没有引用Router模块, 所以无法识别router-outlet. 那么如何解决这个问题?...然后我user component里面添加一些代码: 再运行一次 ng test --sr -cc: 可以看到这部分代码并没有覆盖.

    6.1K110

    Angular 从入坑挖坑 - 模块简介

    使用 @NgModule 装饰器时,通常会使用到下面的属性来定义一个模块 declarations:当前模块组件、指令、管道 imports:当前模块所需其它 NgModule 模块...,只有根模块才会存在 3.2、应用根模块 根模块是用来启动此 Angular 应用模块, 按照惯例,通常命名为 AppModule 通过 Angular CLI 新建一个应用后,默认根模块代码如下...当创建新组件时,需要将它们添加到 declarations 数组。...,表现出当前模块一个依赖关系 providers providers 数组定义了当前模块可以提供给当前应用其它模块各项服务,例如一个用户模块,提供了获取当前登录用户信息服务,因为应用其它地方也会存在调用可能...,因此,可以通过添加到 providers 数组,提供给别的模块使用 bootstrap Angular 应用通过引导根模块来启动因为会涉及构建组件树,形成实际 DOM,因此需要在 bootstrap

    1.8K20

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    对于具有集合控件(例如网格列),设计器允许您添加,删除和修改单个成员。 属性”窗格中找到columns属性,然后单击属性编辑器右侧显示项目”按钮以显示Angular标记定义八个列。...例如,您可以通过添加适当类型新系列元素,轻松地将趋势线添加到图表属性”窗格向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。...随着趋势线添加到图表,设计界面现在看起来像这样: 独立模式下,没有要更新源文件,但您仍然可以生成Angular标记并将它们从设计器复制HTML源。...项目中,控件属性通常绑定运行时数据成员而不是文字值。...在这种情况下,设计器以斜体显示只读文本框绑定。 保存操作期间保留绑定事件; 但是,设计器没有用于创建或编辑它们界面。

    5.4K40
    领券