Skip to content

Add example for using <mat-checkbox> in a ReactiveForm #8349

Closed
@silentHoo

Description

@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>

Metadata

Metadata

Assignees

Labels

P5The team acknowledges the request but does not plan to address it, it remains open for discussionarea: material/checkboxdocsThis issue is related to documentationfeatureThis issue represents a new feature or feature request rather than a bug or bug fixhelp wantedThe team would appreciate a PR from the community to address this issue

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions