如何修复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中，表单控件需要通过FormControl、FormGroup或FormArray来管理。值访问器（value accessor）是一个接口，用于将表单控件与模板中的DOM元素绑定，使得表单控件的值可以双向绑定到DOM元素上。

解决方法

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

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

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

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. 确保模板中正确使用了表单控件

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

<form [formGroup]="myForm">
  <input formControlName="myControl" />
</form>

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

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

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. 确保没有遗漏任何表单控件

确保所有表单控件都在模板中正确地使用了formControlName或formControl指令。例如：

<form [formGroup]="myForm">
  <input formControlName="myControl1" />
  <input formControlName="myControl2" />
</form>

应用场景

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

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

参考链接

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

页面内容是否对你有帮助？

有帮助

没帮助

AngularJS Bootstrap 　　　　AngularJS 的首选样式表是 Twitter Bootstrap ,Twitter Bootstrap 是目前最受欢迎的前端框架 Bootstrap 　　　　你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码: 　　　　<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/boo

完成client.service.ts: import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { ErrorHandler } from '@angular/core'; import 'rxjs/add/operator/map'; import 'rxjs/add/ope

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云