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

Angular单元测试错误-无法绑定到'formGroup‘,因为它不是'form’的已知属性

Angular单元测试错误-无法绑定到'formGroup',因为它不是'form'的已知属性。

这个错误通常是由于在Angular单元测试中没有正确导入所需的模块或组件引起的。要解决这个错误,可以按照以下步骤进行操作:

  1. 确保在测试文件的顶部正确导入所需的模块。在这种情况下,需要导入FormsModule和ReactiveFormsModule模块,因为它们提供了Angular表单相关的功能。可以使用以下代码导入这些模块:
代码语言:txt
复制
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  1. 在测试文件的测试套件(describe)中,使用beforeEach函数导入这些模块。例如:
代码语言:txt
复制
beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [FormsModule, ReactiveFormsModule],
    declarations: [YourComponent]
  })
  .compileComponents();
}));
  1. 确保在测试用例中正确创建组件实例,并在组件的HTML模板中使用了'formGroup'属性。例如:
代码语言:txt
复制
it('should create', () => {
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
  expect(component).toBeTruthy();
});
  1. 如果仍然出现错误,可以尝试重新编译测试文件并运行测试。可以使用以下命令重新编译和运行测试:
代码语言:txt
复制
ng test

这些步骤应该能够解决Angular单元测试中无法绑定到'formGroup'的错误。如果还有其他问题,请提供更多的上下文信息,以便能够提供更具体的帮助。

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

相关·内容

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

在使用 ngModel 进行模板绑定时,angularform 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性元素,而...(12) }); constructor() { } ngOnInit(): void { } } 在视图模板中,将承接 FormGroup 实例属性通过 formGroup 指令绑定...form 元素,然后将控件组每一个属性通过 formControlName 绑定具体对应表单控件上 <div class="...<em>FormGroup</em> 控件组中<em>的</em> <em>FormGroup</em> 实例<em>绑定</em><em>到</em>控件上 <div class...在模板驱动表单中,<em>因为</em><em>不是</em>直接使用<em>的</em> FormControl 实例,因此这里应该在模板上添加一个自定义<em>的</em>指令来完成对于控件数据<em>的</em>校验 使用 <em>angular</em> cli 创建一个用来进行表单验证<em>的</em>指令 ng

18.9K20

Angular: 最佳实践

这很有用,因为当服务端提供一个 User 实例数据给你,只能返回字符串类型时间给你,但是你可能有一个 datepicker 控件,它将日期作为有效 JS Date 对象返回,并且为了避免数据被误解...在应用程序 tsconfig.json 文件中,我们可以设置这个标志,告诉编辑器在未明确类型时候抛出错误。否则,编辑器坚定无法推断变量类型,而认为是 any 类型。...Angular 表单,那么将这些逻辑移动到一个基础类会更友好...但是你不需要继承 AbstractBaseComponent,因为不是每个组件都有 form 表单。...从模版组件方法委托比原始逻辑更难。请注意,这里我用了比原始更难词语,而不是复杂这个词。这是因为除了检查直接条件语句之外,任何逻辑都应该写在组件类方法中,而不是写在模版中。...读者可能意识到我并没有写关于 Directives 和 Pipes 相关内容,那是因为我想写篇详细文章,关于 Angular 中 DOM 是怎么工作

2.8K40

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

标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器中添加服务提供商。 具体请参考官方文档。...formGroup] => 同时在module文件需引入FormsModule...进行静态引导.静态方案可以生成更小,启动更快应用,默认优先使用。但此处因为有些动态计算环境代码,故编译失败,此处手动关闭。 5....无法从router里获取RouteParamsAPI。 原因:angular(v4.1.1)中,使用ActivatedRouteAPI获取路由信息。...11.升级angular(v4.1.1)版本后,等带动态src等属性触发error 原因:angular2启用安全无害化处理,为防止XSS等攻击,具体可参考官方文档安全。

8.1K00

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

---- 模板驱动 模板驱动:主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单值亦或者校验 一个最简单例子...--#UserName 是局部变量,若是有ngmodel,拿到就是一个响应对象,若是非ngmodel绑定,则是dom元素代码--> <!...; 在Submit()函数内,在点击提交时候对整个表单一一去判断,传统方式基本这样 每个控件输入时候对应去触发对应事件做校验,比如[ngModelChange]来处理双向绑定值校验 ---- 数据驱动.../core'; import { FormGroup, Validators, FormBuilder } from '@angular/forms'; // 引入表单一些特性 import { Router...> 复制代码 v4+写法 :嵌套表单取值必须用.get()来获取,不然会报错误,具体原因是api改动了,看下官方文档就知道,改动了挺多(不仅仅这块) <div class

3.8K20

Angular17 使用 ngx-formly 动态表单

form 和 formly-form 组件必要属性和函数,表单动态渲染主要依赖 fields 定义: export class WelcomeComponent { form = new FormGroup...model.password', }, } PS:hide 是框架显示提供属性,props.disabled 是继承自组件属性; 强制显示错误状态: 使用 formState 可以实现字段之间通信...,所以让 formState & expressions.validation.show 共同控制错误状态显示; 首先需要定义一个选项并绑定 formly-form 组件: signInOptions...= { formState: { showValidation: false, }, }; // 绑定 formly-form 组件 <formly-form [form]="...> 接着将 formState 绑定 expressions,最后通过 changeValidation 函数强制显示错误状态: fieldGroup: [ { key: 'password

44210

Angular 结合 NG-ZORRO 快速开发

结合 ng-zorro angular 比较流行 ui 框架有: Angular Material 官方指定 UI 框架 NG-ZORRO,又名 Ant Design of Angular 国内比较流行...如果你还不了解相关 angular 主要内容,请先前往文章了解 Angular 开发内容。...然后我们再把相关权限菜单渲染页面 替换成上面的代码后,得到基本骨架如下: image.png 完成用户列表 接下来完成用户列表骨架,因为使用了 UI 框架,我么写起来异常方便: 获取用户列表...这两个功能是公用一个表单~ 我们在 html 中添加: // user-info.component.html <form nz-form [formGroup]="validateForm" class...// user-info.component.ts import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup

1.7K10

AngularDart4.0 指南- 表单 顶

您可以创造性地设计控件,将它们绑定数据,指定验证规则和显示验证错误,有条件地启用或禁用特定控件,触发内置视觉反馈等等。 Angular通过许多重复,模板化任务使处理过程变得简单。...创建一个基本表单 一个Angular表单有两个部分:一个基于HTML模板和一个组件类,以编程方式处理数据和用户交互。 从课程开始,因为简要地说明了英雄编辑可以做什么。...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面中输入和输出属性)来绑定父组件。 这不是现在问题,这些未来变化不会影响表单。...靠近表单顶部诊断确认所有的更改都反映在model中。 从模板中删除诊断绑定因为已经达到了目的。 根据控制状态给出视觉反馈 使用CSS和类绑定,您可以更改表单控件外观以反映其状态。...如果需要,可以将相同类型错误消息添加到中,但这不是必须因为选择框已经将权限限制为有效值。

17.4K30

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

其实就是考虑幼儿情况啦。 3、填年龄时,出生日期随之变化,因为无法精确,所以只需精确选择单位即可。...但是这里,你会发现我们还没有定义两个原始数据流呢,别急,留到后面是为了引出 Angular 对于 Rx 良好支持。...Angular 中处理响应式表单只有 3 个步骤: 1、在组件 HTML 模版中给要处理控件加上 formControlName="blablabla" 2、form 标签中添加 [formGroup...]="xxx" 指令,这个 xxx 就是你在组件中声明 FormGroup 类型成员变量:比如下面代码中 form: FormGroup; 3、在组件构造函数中取得 FormBuilder 后(...现在这个表单就建立好了,但你可能会问,这也没看出来响应式啊,别急,接下来我们就要看看响应式支持了。我们再回到一开始小题目,我们两个原始数据流:age$ 和 ageUnit$ 怎么构建?

5.2K10

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

最后,它将这个复合插值结果赋值给一个元素或指令属性 您似乎在元素标记之间插入结果并将其分配给属性。这么想很方便,你会因为这个错误而受苦。虽然这不完全正确。...幂等性 幂等表达式是理想因为没有副作用,并且改善了Angular变化检测性能。 对Angular来说,一个幂等表达式总是返回完全相同东西,直到一个依赖值发生变化。...您不能使用属性绑定将值从目标元素中拉出。 您不能绑定目标元素属性来读取。 你只能设置。 同样,您不能在目标元素上使用属性绑定来调用方法。...这样输入映射到指令自己属性。 如果名称未能匹配已知指令或元素(property)属性,则Angular会报告“未知指令”错误。 避免副作用 如前所述,模板表达式评估必须没有可见副作用。...表达式语言本身是为了保证您安全。您不能为属性绑定表达式中任何东西赋值,也不能使用增量和减量运算符。 当然,该表达式可能会调用具有副作用属性或方法。 Angular无法知道或阻止你。

5.1K10

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

,但Angular首先查看名称是否匹配已知指令事件属性,如下例所示: <!...如果名称未能匹配已知指令元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 在事件绑定中,Angular为目标事件设置了一个事件处理程序。...您不需要为您编写Angular组件添加值存取器,因为您可以将值和事件属性命名为适合Angular基本双向绑定语法,并完全跳过NgModel。上面显示sizer是这种技术一个例子。...你知道这一点,因为每个英雄ID没有改变。 但是Angular只能看到新对象引用列表。 别无选择,只能拆除旧DOM元素并插入所有新DOM元素。...绑定[ngSwitch]。 如果您尝试设置*ngSwitch,则会出现错误因为NgSwitch是一个属性指令,而不是结构指令。 改变了其同伴指令行为。 它不直接操作DOM。

29.9K20

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

UI使用 项目简介 《旅游清单》项目的背景主要是为了让笔者更好掌握angular8,因为之前做项目主要是使用vue和react,作为一名合格coder,必须博学而专一,也是因为笔者早年大学时期想要做一个想法...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...官方提供<em>的</em>架构图: 我们知道,一个完整<em>的</em><em>angular</em>应该包括: 模块 <em>Angular</em> 定义了 NgModule,NgModule 为一个组件集声明了编译<em>的</em>上下文环境,<em>它</em>专注于某个应用领域、某个工作流或一组紧密相关<em>的</em>能力...未完善<em>的</em>部分:添加清单时,如果添了不符合规范<em>的</em>地址或者百度地图查不到<em>的</em>地址,因该出现<em>错误</em>提示,这块会在后期优化。

6K30

Angular8稳定版修改概述

在今天早些时候Angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上,演讲者就已经提及了从工具差分加载许多内容以及更多令人敬畏功能。...但这是如何工作? 基本上,Angular将使用polyfill构建其他文件,并且它们将注入nomodule 属性。...支持 Angular团队希望为使用AngularJS所有开发人员提供支持,并帮助他们升级Angular。...之前我们不得不使用下面的代码片段来实现相同功能: validateFormAndDisplayErrors(form: FormGroup) { Object.keys(form.controls...包还是跟以前保持一样。 结论 以上就是angular 8版本一些改动。总体来说变化不是很大,延续了angular每年一个稳定版习惯。 原文链接

4.5K20

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

对我而言,最好使用更智能编辑器vim,因为它会为代码中任何错误提供额外补充,因为TypeScript是强类型。...但这并不意味着我们失去了访问这种行为机会。我们已经看到并使用了[value]="expression",它将表达式绑定输入元素value属性。...但是我们也有(input)="expression"一种将表达式绑定输入元素输入事件声明方式。...因此,我们只需编写简单代码即可获取我们价值,并将其绑定代码中输入值和变量。...在大多数情况下,我们更喜欢因为它可以让我们获得更小包和更快代码。另外,请记住,AoT对您代码质量过于严格,因此它可能会产生您以前从未见过错误。更早地运行构建,因此更容易修复。

42.5K10

Angular 6.x 表单快速入门

Driven 表单特点 使用方便 适用于简单场景 通过 [(ngModel)] 实现数据双向绑定 自动生成 Form Model (异步) 最小化组件类代码 不易于单元测试 Reactive 表单特点...比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离组件类中 手动创建 Form Model (同步) 方便跟踪表单控件值变化 易于动态添加表单控件 易于单元测试 本文主要介绍...第一节 - 创建最简单输入框 如何实现双向绑定? 在 Angular 表单中,我们通过 ngModel 指令来实现双向绑定。...如何显示验证失败错误信息?...AppComponent { username = 'semlinker'; } 需要注意是,在使用 标签后,我们 username 输入框,必须添加 name 属性

4.6K20

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

当nz-checkbox-group多选框组遇上必选校验 Angular2 ng-zorro-antd checkbox 今天表单中用到ng-zorro-antd组件多选框nz-checkbox-group...,最开始用是响应式表单验证+响应式表单验证,结果总是无法达到预期效果。...本篇是讲述是从遇到问题最终解决问题全过程,对于想要直接获取答案小伙伴可直接跳至 再次尝试 一节。...再次尝试 这曾一度想过放弃然后自己用原始方式写,再一想到原始方式还要自己考虑样式什么,作为一个有着css恐惧症Java程序猿我决然地选择了硬着头皮在啃会儿。...于是有了如下终极解决方案: 问题.html中不用做修改。 问题.ts修改如下: //因为不想在提交方法_submitForm()再循环一遍获取多选结果,就只好在这先定义一个临时用于存储选择结果。

4.3K20
领券