Angular2 testcase shows No provider for NgControl

Question

ng test shows the below error but it works as expected in reality.

Error: Template parse errors:
    No provider for NgControl ("
      <div class="form-group">
        <label class="control-label">Location</label>
        [ERROR ->]<select class="selectpicker" *ngIf="locations" data-style="btn btn-primary btn-round" title="Select A"): VehicleFormComponent@27:4
    No provider for NgControl ("  <div class="form-group label-floating">
        <label class="control-label">Is Available</label>
        [ERROR ->]<md-slide-toggle [(ngModel)]="isAvailable" color="primary" [ngModelOptions]="{standalone: true}">
       "): VehicleFormComponent@41:4 in src/test.ts (line 25739)
    Expected undefined to be truthy.

I think it's mainly because of adding [ngModelOptions]="{standalone: true}" in a custom tag.

Did you add reference to "FormsModule" in your TestBed module? — VadimB, Feb 02 '17 at 12:20

score 17 · Accepted Answer · answered Feb 02 '17 at 12:31

17

Did you add reference to "FormsModule" in your TestBed module?

import { FormsModule } from '@angular/forms';

TestBed.configureTestingModule({
  imports: [ FormsModule ]
})
.compileComponents();

answered Feb 02 '17 at 12:31

VadimB

5,533
2
34
48

did you able to reproduce this error `PhantomJS 2.1.1 (Linux 0.0.0): Executed 39 of 65 (1 FAILED) (0 secs / 1.296 secs) PhantomJS 2.1.1 (Linux 0.0.0) VehicleFormComponent should create FAILED get LocationsService@webpack:///src/app/shared/services/locations.service.ts:9:4173 <- src/test.ts:53695:4196 getInternal` – Avinash Raj Feb 02 '17 at 12:40
1

Yes, I had this error. Try to add also `RouterTestingModule` into your TestBed imports. Import from `import {RouterTestingModule} from "@angular/router/testing";`. Let me know if it help. – VadimB Feb 02 '17 at 12:43
No, it not this case. I had `LocationStrategy` error. But seems it's some assert failed only, not compilation problems. No? – VadimB Feb 02 '17 at 12:48
yep. only on running testcase – Avinash Raj Feb 02 '17 at 12:50
1

Try run your tests from IDE (e.g. WebStorm) - it shows proper stacktrace if exception occurs. Because error not clear - it can instantiate service as I understand. But no more info ( – VadimB Feb 02 '17 at 12:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/134690/discussion-between-avinash-raj-and-vadimb). – Avinash Raj Feb 02 '17 at 13:06
3

In case it helps anyone else... I was using a reactive form and therefore had to import the ReactiveFormsModule rather than the FormsModule. Because I was setting my form control on a mat-radio-group I also had to import MatRadioModule. – Travis Jan 18 '23 at 22:50

score 3 · Answer 2 · answered Jan 07 '21 at 17:11

3

If anybody else comes here, maybe this will help. I was missing the optional decorator in the constructor:

  constructor(@Optional() @Self() public ngControl: NgControl) {}

answered Jan 07 '21 at 17:11

Akora

756
7
22

1

But why is @Optional() necessary in the first place? – dude Jan 25 '21 at 17:55
@dude You can have a look at a good article related here: https://medium.com/frontend-coach/self-or-optional-host-the-visual-guide-to-angular-di-decorators-73fbbb5c8658 – Akora Jan 26 '21 at 07:40

Angular2 testcase shows No provider for NgControl

2 Answers2

Linked