CODEWITHSUNDEEP
angularunit-testingkarma-jasmine
gritbranch
gritbranch

Reputation: 199

Angular Unit Test (with Getter): Error: No value accessor for form control with name

I have a FormControl that I access via a getter. When I run my unit test, I'm getting an error that says:

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

Below is my component and spec file:

MyComponent.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();
  });
});

I get

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)

I'm not entirely sure why this is happening, and I could not find an issue in Stackoverflow with a similar setup.

Any help or suggestion is appreciated. Thanks.

Upvotes: 3

Views: 1244

Answers (1)

ammadkh
ammadkh

Reputation: 597

import ngx-intl-tel-input component into your test suit. Or You can add ngDefaultControl attribute in your custom element, something like below;

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

Upvotes: 0

Related Questions