Angular 单元测试 : Error: No value accessor for form control with name: 'phoneNumber'

Question

在我的 Angular 组件中，我使用了作为表单一部分的第 3 方组件，简化的模板如下所示:

<form novalidate autofill="off" [formGroup]="addPhoneForm">
    <div>
        <int-phone-prefix [locale]="'en'" [defaultCountry]="'us'" formControlName="phoneNumber"></int-phone-prefix>
     </div>
     <div>
        <input type="text"formControlName="phoneName">
    </div>
</form>

一切都很好......直到为我的组件的方法编写测试的时候。我知道我需要模拟第 3 方组件以防止它提示该组件不是已知元素。我也不想不使用 [NO_ERRORS_SCHEMA]，因为第 3 方组件是我的 FormGroup 的一部分。所以在我的测试文件中，我在设置测试套件之前添加了一个模拟，注意我如何将 formControlName 添加到模拟模板，如何将模拟添加到 declarations 数组以及我什至如何在我的 providers 数组中使用 forwardRef 以便模拟将被视为我的表单的一部分....

// Mock Component
@Component({
  template: '<input type="text" formControlName="phoneNumber">',
  // tslint:disable-next-line
  selector: 'int-phone-prefix',
})
class IntPhonePrefixComponent {
  constructor() { }
}

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AddPhoneComponent, IntPhonePrefixComponent],
      imports: [
        FormsModule,
        ReactiveFormsModule
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          multi: true,
          useExisting: forwardRef(() => IntPhonePrefixComponent),
        }
      ]
    })
    .compileComponents();
  }));

但是，尽管模拟并将其包含在我的提供程序数组和声明数组中，但我在运行测试套件时仍然会收到以下错误。

错误:名称为“phoneNumber”的表单控件没有值访问器

有人可以告诉我我做错了什么吗？

Answer 1

您的 providers 数组在错误的位置:int-phone-prefix 应该有 NG_VALUE_ACCESSOR，而不是测试模块本身。

最简单的解决方案是为 stub IntPhonePrefixComponent stub 所需的三个 ControlValueAccessor 方法(并移动 provide: NG_VALUE_ACCESSOR//etc. 片段到它的装饰器)。我并不是说它是最好的或最优雅的，可能不是。