Components: Add example for using <mat-checkbox> in a ReactiveForm

[silentHoo]

Proposal

I've trouble setting up <mat-checkbox> in an ReactiveForm an get No value accessor for form control [...] when testing. When I run the app in dev mode it works as expected. So I propose to add an example to the official documentation for using the components in a ReactiveForm.

Is there anything else we should know?

For the sake of completeness, here is my current problem I get. But this issue only addresses to add an example to the docs.

When using this:

<mat-checkbox
  id="allDay"
  type="checkbox"
  formControlName="allDay">
      <!-- i18n: @@event.allDay -->All Day Event?<!-- /i18n -->
</mat-checkbox>

I get this error when running npm test:

Failed: No value accessor for form control with name: 'allDay'
  Error: No value accessor for form control with name: 'allDay'
      at _throwError <path_to_my_project>/node_modules/@angular/forms/@angular/forms.es5.js:1918:1)
      at setUpControl <path_to_my_project>/node_modules/@angular/forms/@angular/forms.es5.js:1828:1)
      at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.addControl <path_to_my_project>/node_modules/@angular/forms/@angular/forms.es5.js:4808:1)
      at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName._setUpControl <path_to_my_project>/node_modules/@angular/forms/@angular/forms.es5.js:5396:1)
      at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName.ngOnChanges <path_to_my_project>/node_modules/@angular/forms/@angular/forms.es5.js:5314:1)
      at checkAndUpdateDirectiveInline <path_to_my_project>/node_modules/@angular/core/@angular/core.es5.js:10845:1)
      at checkAndUpdateNodeInline <path_to_my_project>/node_modules/@angular/core/@angular/core.es5.js:12349:1)
      at checkAndUpdateNode <path_to_my_project>/node_modules/@angular/core/@angular/core.es5.js:12288:1)
      at debugCheckAndUpdateNode <path_to_my_project>/node_modules/@angular/core/@angular/core.es5.js:13149:22)
      at debugCheckDirectivesFn <path_to_my_project>/node_modules/@angular/core/@angular/core.es5.js:13090:1)

But the code works for <mat-form-field> without any problems:

<mat-form-field>
  <input
    matInput
    type="text"
    formControlName="name">
</mat-form-field>

[julianobrasil]

@silentHoo, checkout this working example and try to modify it to reflect your issue: https://stackblitz.com/edit/checkbox-reactive

Have you correctly import FormsReactiveModule and wrapped your control within a formGroup element?

[edited]: I've also tested building and serving it in Apache with no problems

[silentHoo]

Thanks for the Stackblitz. This is how I use it too. Hm, okay then I've used it properly. The problem comes with testing the component itself I found out.

I just stumpled upon that NO_ERRORS_SCHEMA in our TestingModule config which will not throw an error when there's an element in the template which angular doesn't know. So, that's the original source where my issue lies. We added that error suppression in the past, I forgot.

My previous TestingModule config was:

TestBed.configureTestingModule({
      declarations: [
        EventFormComponent
      ],
      imports: [
        TranslateModule.forRoot(),
        ReactiveFormsModule
      ],
      providers: [
        FormBuilder,
        {provide: EventService, useClass: EventServiceMock},
        {provide: NotificationService, useClass: NotificationServiceMock},
        {provide: ActivatedRoute, useValue: {params, queryParams}},
        {provide: Router, useClass: RouterMock},
        {provide: PreferencesService, useValue: generalPreferencesServiceMock}
      ],
      schemas: [NO_ERRORS_SCHEMA] // <-- Tells the compiler not to error on unknown elements and attributes
    }).compileComponents();

After removing NO_ERRORS_SCHEMA I get:

'mat-checkbox' is not a known element:
    1. If 'mat-checkbox' is an Angular component, then verify that it is part of this module.
    2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Yep, and that's the true point here. I forgot to add the missing modules into the imports block - my bad 😞

Thanks for your fast response! It would be great to see some bits on testing in the docs.

[karthick678]

use 'MatCheckboxModule'

[walvekarnikhil]

The checkbox is there in the example, it's not as a separate checkbox example but part of another example.
Look for 'Form field with label' in form field examples

Do we need a separate example here?

[digeomel]

@walvekarnikhil I believe you do, especially for the very common scenario when you want to have a group of checkboxes acting essentially as chips, all belonging to the same form control. The use case here is that with chips, if nothing is selected the user doesn't see the available options until they actually click in the chips list, while with checkboxes all available options are there, but unchecked.