Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:6 (2 by maintainers)

Top GitHub Comments

6reactions

julianobrasilcommented, Nov 10, 2017

@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

5reactions

karthick678commented, Jul 21, 2018

use ‘MatCheckboxModule’

Top Results From Across the Web

Angular 5 reactive form set mat-checkbox to check

Everything is working well except that when I use patchValue({amateur: [false]) it is still checked. What is weird is I have other forms...

Angular Material 13 Checkboxes with Reactive Forms Tutorial

Create Checkboxes with Reactive Form ... We will use the formGroup directive to gather the value of checkboxes using the mat-checkbox directive.

Angular Material Checkbox Example - ItSolutionStuff.com

Here, we will create very simple example using reactive form. first we need to import MatCheckboxModule, MatButtonModule, FormsModule and ...

Angular material checkbox with reactive form observables to ...

Angular material checkbox with reactive form observables to monitor form control values · The HTTP module uses observables to handle AJAX requests and...

Checkbox | Angular Material

<mat-checkbox> supports an indeterminate state, similar to the native <input type="checkbox"> . While the indeterminate property of the checkbox is true, it ...