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

如何修复Angular Unit Test中的“Error: No value accessor for form control with name”?

问题分析

“Error: No value accessor for form control with name”这个错误通常出现在Angular的单元测试中,表示Angular无法找到与表单控件名称关联的值访问器(value accessor)。这通常是因为表单控件没有正确地注册或初始化。

基础概念

在Angular中,表单控件需要通过FormControlFormGroupFormArray来管理。值访问器(value accessor)是一个接口,用于将表单控件与模板中的DOM元素绑定,使得表单控件的值可以双向绑定到DOM元素上。

解决方法

以下是几种常见的解决方法:

1. 确保表单控件已正确注册

确保在组件中正确地初始化了表单控件。例如:

代码语言:txt
复制
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  myForm = new FormGroup({
    myControl: new FormControl('')
  });
}

2. 确保模板中正确使用了表单控件

确保在模板中正确地使用了表单控件。例如:

代码语言:txt
复制
<form [formGroup]="myForm">
  <input formControlName="myControl" />
</form>

3. 确保在单元测试中正确初始化表单

在单元测试中,确保表单控件已正确初始化。例如:

代码语言:txt
复制
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MyComponent } from './my-component.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      imports: [ ReactiveFormsModule ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

4. 确保没有遗漏任何表单控件

确保所有表单控件都在模板中正确地使用了formControlNameformControl指令。例如:

代码语言:txt
复制
<form [formGroup]="myForm">
  <input formControlName="myControl1" />
  <input formControlName="myControl2" />
</form>

应用场景

这个错误通常出现在以下场景:

  • 在组件中初始化表单控件时遗漏了某些控件。
  • 在模板中使用表单控件时没有正确地使用formControlNameformControl指令。
  • 在单元测试中没有正确地初始化表单控件。

参考链接

通过以上方法,你应该能够解决“Error: No value accessor for form control with name”这个错误。如果问题仍然存在,请检查是否有其他遗漏或错误配置的地方。

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

相关·内容

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

首先我解释下为啥需要 ControlValueAccessor 接口以及它在 Angular 如何使用。...任何一个组件或指令都可以通过实现 ControlValueAccessor 接口并注册为 NG_VALUE_ACCESSOR,从而转变成 ControlValueAccessor 类型对象,稍后我们将一起看看如何做...Angular 也为所有原生 DOM 表单元素创建了 Angular 表单控件(译者注:Angular 内置 ControlValueAccessor): Accessor Form Element...表单控件是如何数据同步(译者注:作者贴可能是 Angular v4.x 代码,v5 有了点小小变动,但基本相似): export function setUpControl(control: FormControl...form control // 设置原生控件值更新时监听器,每当原生控件值更新,Angular 表单控件值也更新 valueAccessor.registerOnChange((newValue

3.8K20
  • AngularDart4.0 指南- 表单 顶

    禁用窗体提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单新项目。 添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己。...你还没有使用Angular。 没有绑定或额外指令,只是布局。 在模板驱动表单,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...指令exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置为“ngForm”,因为ngModel指令exportAs属性是“ngForm”。...为了达到这个效果,在Name 之后立即添加下面的: lib/src/hero_form_component.html (hidden error message) <div [hidden...概要 Angular表单为数据修改,验证等提供支持。 在此页面,您学习了如何使用以下功能: 一个HTML表单模板和一个带有@Component注解表单组件类。

    17.5K30

    掌握 Laravel 测试方法

    这就是应该如何创建「功能测试」用例秘密。接下来我们将创建具体测试用例,来讲解如何在 Laravel 中使用「单元测试」和「功能测试」。...($value) { return ucfirst($value); } } 我们刚刚添加了 accessor 方法,它功能是修改文章标题,这正是我们在单元测试用例要测试...property return $post->name; } } 在 index 方法,我们通过请求 id 参数,从 Post 模型查询一篇文章。...$ php artisan make:test --unit 执行上面创建测试用例命令会创建文件名为 tests/Unit/AccessorTest.php 文件。 <?...以上就是如何在 Laravel 中使用单元测试使用方法。 功能测试 这一节我们将学习如何创建功能测试用例来对先前创建控制器进行「功能测试」。

    5.7K10

    ng 核心模块

    angular.forEach 为obj集合每个项执行iterator函数,obj可以是一个对象或者是数组。...这个iterator函数执行基于iterator(value,key,obj)结构函数,value是一个对象属性或者是数组元素,key是对象key或者是数组index,或者是obj自己。...使用Angular标记类似于{{hash}}在一个href属性,如果点击时机早于Angular替换{{hash}}标记将导致连接到错误URL。...使用Angular 标记例如{{hash}}在一个src属性不能正确工作:浏览器将从带有{{hash}}URL获取资源直到Angular替换了这个表达式。使用ngSrc指令可以解决这个问题。...使用Angular 标记例如{{hash}}在一个srcset属性不能正确工作:浏览器将从带有{{hash}}URL获取资源直到Angular替换了这个表达式。

    1.2K10
    领券