title: No value accessor for form control with name... for mat-select controls
body: <p>I am making some unit test with <strong>jasmine</strong> and <strong>karma</strong> for an <strong>angular 6</strong> app that validate if a <strong>formGroup</strong> field is valid. I am experiencing problems with mat-select control. when I run the test case, Karma fires me an error saying <code>Error: No value accessor for form control with name: 'importId'</code>. By the way, the component works fine as I expected.</p>
  
  <p><a href="https://i.stack.imgur.com/loCIJ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/loCIJ.jpg" alt="enter image description here"></a></p>
  
  <p>This is my component:</p>
  
  <pre><code>import {Component, Inject, OnInit} from '@angular/core';
  import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
  import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
  
  @Component({
    selector: 'app-my-component',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.css']
  })
  export class MyComponent implements OnInit {
    modelForm: FormGroup;
    imps;
  constructor(
      public dialogRef: MatDialogRef&lt;MyComponent&gt;,
      @Inject(MAT_DIALOG_DATA) public data: any) {
        this.imps = data['imp'];
    }
  
  
    ngOnInit() {
      this.modelForm = new FormGroup({
        name: new FormControl(null, Validators.required),
        importId: new FormControl(null, Validators.required),
      });
    }
  }
  </code></pre>
  
  <p>My HTML template looks like this:</p>
  
  <pre><code>&lt;mat-dialog-content&gt;
    &lt;form [formGroup]="modelForm"&gt;
  
      &lt;mat-form-field&gt;
        &lt;input matInput
               placeholder="Name"
               formControlName="name"&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field&gt;
        &lt;mat-select placeholder="Source import"
                    formControlName="importId"&gt;
          &lt;mat-option *ngFor="let imp of imps" [value]="imp.uuid"&gt;
            {{imp.label}}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
  
    &lt;/form&gt;
  &lt;/mat-dialog-content&gt;
  
  &lt;mat-dialog-actions&gt;
    &lt;button mat-raised-button color="primary" [disabled]="!modelForm.valid" (click)="someFakeFunction()"&gt;Create&lt;/button&gt;
    &lt;button mat-raised-button (click)="dialogRef.close()"&gt;Cancel&lt;/button&gt;
  &lt;/mat-dialog-actions&gt;
  </code></pre>
  
  <p>Finally, this is my unit test:</p>
  
  <pre><code>import {async, ComponentFixture, TestBed} from '@angular/core/testing';
  import {MockMatDialogData, MockMatDialogRef} from '@testing/mock/material';
  import {MyComponent} from './evaluation-wizard.component';
  import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
  import {FormsModule, ReactiveFormsModule} from "@angular/forms";
  import {NO_ERRORS_SCHEMA} from "@angular/core";
  
  
  describe('MyComponent', () =&gt; {
    let component: MyComponent;
    let fixture: ComponentFixture&lt;MyComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [MyComponent],
        imports: [ReactiveFormsModule, FormsModule],
        providers: [
          {provide: MatDialogRef, useValue: MockMatDialogRef},
          {provide: MAT_DIALOG_DATA, useClass: MockMatDialogData}
        ],
        schemas: [NO_ERRORS_SCHEMA],
      })
        .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(MyComponent);
      component = fixture.componentInstance;
      component.ngOnInit();
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  
    describe('Form validation', () =&gt; {
      it('form invalid when empty ', function () {
        expect(component.modelForm.valid).toBeFalsy();
      });
  
      it('name field validity ', () =&gt; {
        let name = component.modelForm.controls['name'];
        expect(name.valid).toBeFalsy();
  
        let errors = {};
        errors = name.errors || {};
        expect(errors['required']).toBeTruthy();
  
        name.setValue("test");
        errors = name.errors || {};
        expect(errors['required']).toBeTruthy();
      });
  
    });
  });
  </code></pre>
  
  <p>I can't make that works, any suggestions what I am missing?</p>