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

Angular的FormControl方法markAsTouched在测试用例中不起作用

Angular的FormControl方法markAsTouched用于将表单控件标记为已触摸(touched),以便在验证表单时显示错误消息。然而,在测试用例中,有时可能会遇到markAsTouched方法不起作用的情况。

这个问题可能是由于测试用例中的一些特殊情况或错误导致的。以下是一些可能的原因和解决方法:

  1. 确保FormControl对象正确创建和初始化:在测试用例中,首先要确保FormControl对象已正确创建并与表单控件关联。可以使用new FormControl()方法创建FormControl对象,并将其与表单控件绑定。
  2. 确保FormControl对象已正确添加到FormGroup中:如果FormControl对象未正确添加到FormGroup中,markAsTouched方法将不起作用。在测试用例中,确保FormControl对象已正确添加到FormGroup中,以便表单控件可以与其关联。
  3. 确保在调用markAsTouched方法之前,FormControl对象已正确渲染:有时,在测试用例中,可能需要等待一段时间,以确保FormControl对象已正确渲染。可以使用async/await或者tick()函数等方法来等待FormControl对象的渲染完成,然后再调用markAsTouched方法。
  4. 确保在调用markAsTouched方法之前,FormControl对象已正确绑定到模板中:在测试用例中,确保FormControl对象已正确绑定到模板中的表单控件上。这可以通过在测试用例中模拟用户操作来实现,例如使用dispatchEvent()函数模拟输入或点击事件。
  5. 确保在调用markAsTouched方法之前,FormControl对象已正确订阅状态变化:在测试用例中,确保FormControl对象已正确订阅状态变化。这可以通过在测试用例中添加适当的订阅代码来实现,以便在FormControl对象状态变化时执行相应的操作。

如果上述解决方法仍然无法解决问题,可以考虑使用其他方法来模拟FormControl对象的已触摸状态,例如手动设置FormControl对象的touched属性为true。

总之,当在测试用例中遇到FormControl的markAsTouched方法不起作用时,需要仔细检查测试用例的代码,确保FormControl对象正确创建、初始化、绑定和订阅状态变化,并确保在调用markAsTouched方法之前,FormControl对象已正确渲染到模板中。

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

相关·内容

软件测试根据测试用设计方法,测试用设计方法有哪些?举例说明

一般来讲,常用试用设计方法有五种,分别是:正交实验法、边界值分析法、等价类划分法、判定表法、错误推测法。当然测试用设计方法不止这些,下面只是通过举例说明着重讲讲这常用五种方法。...一、正交实验法 用语言描述正交实验法会很抽象难懂,简单说,就是各因素互相独立情况下,设计出一种特殊表格,找出能以少数替代全面的测试用。...利用正交实验设计方法设计测试用,比使用等价类划分,边界值分析,因果图等方法有以下优点:节省测试工作工时;可控制生成试用例数量;测试用具有一定覆盖率。...选出试用,应选取正好等于、刚刚大于、刚刚小于边界值。 举例说明,对于区间min,max值,测试用可以记为min,min+,max,max-。...例如,假定 X 为整数,10≤X≤100,那么 X 测试应该取边界值为:10,11,99,100。

84030
  • JUnit4:试用中用FixMethodOrder指定测试方法执行顺序

    2018/09/30补记:感谢评论指正,@FixMethodOrder顺序也并不一定是方法代码定义顺序,这与JVM实现有关,我猜class中方法名是保存在一个map,不同JVM对map实现不同...我们写JUnit测试用时,有时候需要按照定义顺序执行我们单元测试方法,比如如在测试数据库相关时候要按照测试插入、查询、删除顺序测试。...所以这时就需要有办法要求JUnit执行测试方法时按照我们指定顺序来执行。 JUnit是通过@FixMethodOrder注解(annotation)来控制测试方法执行顺序。...@FixMethodOrder注解参数是org.junit.runners.MethodSorters对象,枚举类org.junit.runners.MethodSorters定义了如下三种顺序类型...Note that the order from the JVM may vary from run to run (按照JVM得到方法顺序,也就是代码定义方法顺序) MethodSorters.DEFAULT

    76120

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

    方式来简化完成表单构建 FormBuilder 服务有三个方法:control、group 和 array,用于组件类中分别生成 FormControl、FormGroup 和 FormArray...同模板驱动表单数据有效性验证相同,响应式表单同样可以使用原生表单验证器,设定规则时,需要将模板控件名对应数据值第二个参数改为验证规则 响应式表单,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应...然后,一旦控件数据发生了变化,angular 就会调用这些函数 这里创建针对指定控件 getter 方法,从而在模板通过此方法来获取到指定控件状态信息 import { Component, OnInit...验证方法,当数据有效时,返回 null,当数据无效时,则会返回一个对象信息,这里 nameinvalid 就是我们模板获取到错误信息 key 值 <div class="form-group...<em>在</em>模板驱动表单<em>中</em>,因为不是直接使用<em>的</em> <em>FormControl</em> 实例,因此这里应该在模板上添加一个自定义<em>的</em>指令来完成对于控件数据<em>的</em>校验 使用 <em>angular</em> cli 创建一个用来进行表单验证<em>的</em>指令 ng

    18.9K20

    (转) 别再对 Angular 表单 ControlValueAccessor 感到迷惑

    首先我解释下为啥需要 ControlValueAccessor 接口以及它在 Angular 是如何使用。...本文我将使用原生表单控件术语来区分 Angular 特定 formControl 和你 html 使用表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件如...,当 Angular 组件模板遇到 input 或 textarea DOM 原生控件时,会使用DefaultValueAccessor 指令: @Component({ selector:...jQuery 方法原生 DOM 元素上创建一个 slider 控件,然后使用 widget 属性引用这个控件。... writeValue 方法内我们把得到值传给 slider 组件。 现在我们把上面描述功能做成一张交互式图: ?

    3.8K20

    Angular6自定义表单控件方式集成Editormd

    ControlValueAccessor 这是自定义表单组件核心,只有继承这个接口,才有被 AngularformControl识别的资格。...(isDisabled: boolean): void; } writeValue:初始化时候将formControl值传递给原生表单控件(即,将模型新值写入视图或 DOM 属性); registerOnChange...formControl指令实现: // https://github.com/angular/angular/blob/master/packages/forms/src/directives/reactive_directives...里面确实能看到一些似曾相识方法,但个人能力有限,无法完全看懂,也就只能到这里了,喜欢深入探究可以自行探索。...Function = () => { }; registerOnChange(fn: any): void { this.onChange = fn; } registerOnTouched 本示例实际未用方法

    5.2K20

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,响应式表单,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件值(获取setvalue

    2.8K50

    Angular5.0.0新特性

    Angular Universal是一个帮助开发者实现SSR开源项目,通过服务端渲染 Angular应用程序,然后客户端引导启动程序并生成HTML,由此更好支持那些对javascript不太友好化境来提高应用程序性能...5.0版本Angular开发团队添加了ServerTransferStateModule(与之对应BrowserTransferStateModule),这个模块允许你服务端生成模块信息并传输到客户端...4.国际化号码、日期和货币管道   Angular5已经建立了新号码,日期和货币管道,增加了跨浏览器标准化实现,消除国际化不同环境差异。...5.0管道可以使用我们自己实现,可以在任何地方实现本地化支持和配置。...8.HttpClient   4.3HttpClient模块被封装在@angular/common,新HttpClient被封装在@angular/common/http,更新Http模块后

    1.7K10

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

    它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器添加服务提供商。 具体请参考官方文档。...(v4.0.0)中封装http服务对参数standardEncoding编码方法,见node_modules/@angular/http/@angular/http.js文件,导致后台获取图片地址失败...组件迁移后,无法正确订阅事件 原因:angular(v4.0.0)依赖注入,若在不同地方声明provider,则会创建不同实例。...webstorm里,更改文件不能在浏览器更新输出。 原因:webstorm里面默认启用”safe write”,将保存先存到临时文件。...原因:angular(v4.1.1),使用ActivatedRouteAPI获取路由信息。

    8.2K00

    Angular 18 引入了 Zoneless 变更检测

    方法旨在通过减少变更检测周期数以及提供更易读堆栈跟踪来提高性能。...() ] }); 谷歌高级软件工程师 Alex Rickabaugh X(前身名为 Twitter)上发表推文谈到了 Angular 18 中支持 zoneless 重要性: 我对这个版本发布感到特别的自豪...我们面临最大挑战是保持 Angular 稳定性和可靠性同时跟上现代 Web 发展。借助 v18,我们朝着没有 zone.js 未来迈出了第一步。... Angular 18 中有几个特性已经达到了稳定状态。之前处于实验性支持状态 Material 3 组件现已稳定,并包括了新主题和文档。...现在可以 Angular 18 为 ng-content 指定默认内容。这允许开发人员在他们组件中提供回退内容。

    21310

    Angular8稳定版修改概述

    Bazel可作为选择加入,预计将包含@angular/cli第9版。...angular使用builders进行主要操作:serve ,build ,test ,lint和e2e 。您可以angular.json文件查看使用过构建器。 ......我认为这是gulp/grunt“旧时代”命令。 基本上,构建器只是一个带有一组命令函数,您可以createBuilder()从@angular-devkit/architect包传递给方法。...懒加载变动 新版本不推荐使用loadChildren:string 懒惰加载模块语法。 8.0.0之前,懒加载使用方法如下: loadChildren: '....一个域中支持多个应用。 阅读Angular Doc上有关服务工作者更多信息。 表单改进 添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。

    4.5K20

    设计测试用方法

    四、写测试用 五、设计测试用方法 1.总设计测试用方法——基于需求设计方法 2.等价类 3.边界值 4.因果图 5.正交排列 6.场景设计法 7.错误猜测法 一、如果测试时间有限,如何保证在有限时间内让产品上线...用户需求 3.需求分析》需求文档》UI设计师画产品原型 五、设计测试用方法 1.总设计测试用方法——基于需求设计方法 测试人员接到需求之后,要对需求进行分析和验证,从合理需求中进一步分析细化需求...,从细化需求找出测试点,根据这些测试点再去设计测试用。...具体设计测试用方法 2.等价类 把测试输入划分为若干个等价类,从每一个等价类当中选择一个或者几个测试用进行测试,如果这些测试用测试通过,那么我们就说这个测试用所在等价类测试通过。...实例: ATM取款机取款 ATM机插入卡——输入密码——输入取款金额——取款——退卡 会发生异常情况: 1.ATM机插入卡:插入其他卡(公交卡、饭卡),卡插反了,消磁,银行卡不匹配,损坏

    53820

    如何使用Python进行单元测试

    试用 我们试用FizzBuzzTest类调用test_one_should_return_one()方法。测试用是测试程序特定部分实际测试代码。...如果您查看这两个测试用,您会看到它们都创建了FizzBuzz类一个实例。第一个第6行,另一个第11行。 我们可以从这两个方法重构FizzBuzz实例创建,从而改进代码。...它就像一个总结考试内容标题。如果测试失败,你首先看到就是它。因此,名称应该清楚地表明哪些功能不起作用。 测试用名称列表应该读起来像摘要或场景列表。这有助于读者理解被单元行为。...构造测试用方法体 一个设计良好试用由三部分组成。第一部分,安排、设置要测试对象。第二部分,Act,练习被单元。最后,第三部分,断言,对应该发生事情提出主张。...试用,您可以使用用该属性装饰方法名称作为参数。 pytest框架在运行时将它们连接起来,并将fizzBuzz实例注入测试用

    2.8K20

    Angular 自定义属性指令

    本文将使用 UltimateAngular/angular-pro-src 示例,来一步步介绍自定义属性指令相关知识。...('style.border') border: string; 设置完属性绑定后,我们来更新一下 onKeyDown() 方法代码,当发现输入非数值时,为当前输入框设置一个红色边框: this.border...我们定义了一个输入属性,用于接收用户自定义提示消息,之后通过调用 DOM API 创建了一个 div 元素,然后 ngOnInit 生命周期钩子,执行相关初始化操作。...针对这个问题,我们可以定义指令时,设置 exportAs 属性: @Directive({ selector: '[tooltip]', exportAs: 'tooltip' }) 之后,我们就可以模板...Angular 表单模块,也大量使用了 exportAs 属性,比如 ngModel、ngForm、ngModelGroup 及 formControl 指令等。

    2K30
    领券