Angular 单元测试(带 Getter): Error: No value accessor for form control with name

Question

我有一个通过 getter 访问的 FormControl。当我运行我的单元测试时，我收到一条错误消息:

Error: No value accessor for form control with name: 'myMobileNumber'

下面是我的组件和规范文件:

我的组件.ts

export class MyComponent implements OnInit {

  myFormGroup: MyFormGroup;

  constructor(...) {
  }

  get myMobileNumber() {
    return this.myFormGroup.get('myMobileNumber') as FormControl;
  }

  ngOnInit() {
    this.myFormGroup = new MyFormGroup();
    
    this.myMobileNumber.patchValue('');
  }
}

MyComponent.html

      <ngx-intl-tel-input
        ...
        formControlName="myMobileNumber">
      </ngx-intl-tel-input>
      <div
        *ngIf="myMobileNumber.invalid && (myMobileNumber.dirty || myMobileNumber.touched)">
        <small *ngIf="myMobileNumber.errors" class="text-danger" i18n>Mobile number is
          invalid.</small>
      </div>

MyComponent.spec.ts

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      imports: [ HttpClientTestingModule, FormsModule, ReactiveFormsModule, RouterTestingModule, NgbModule, ],
      providers: [
        NgbActiveModal,
      ]
    })
    .compileComponents();
  }));

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

    component.myFormGroup = new MyFormGroup();
    component.myMobileNumber.setValue('');

    fixture.detectChanges();
  });

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

我明白了

Error: No value accessor for form control with name: 'myMobileNumber'
    at _throwError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/forms/fesm2015/forms.js:2384:1)
    at setUpControl (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/forms/fesm2015/forms.js:2286:1)
    at FormGroupDirective.addControl (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/forms/fesm2015/forms.js:5459:1)
    at FormControlName._setUpControl (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/forms/fesm2015/forms.js:6037:1)
    at FormControlName.ngOnChanges (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/forms/fesm2015/forms.js:5968:1)
    at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:2197:1)
    at callHook (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:3109:1)
    at callHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:3075:1)
    at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:3027:1)
    at selectIndexInternal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:6264:1)

我不完全确定为什么会这样，而且我在 Stackoverflow 中找不到具有类似设置的问题。

如有任何帮助或建议，我们将不胜感激。谢谢。

Answer 1

将 ngx-intl-tel-input 组件导入您的测试服。或者您可以在自定义元素中添加 ngDefaultControl 属性，如下所示；

 <ngx-intl-tel-input
        ...
        formControlName="myMobileNumber" ngDefaultControl>
 </ngx-intl-tel-input>