RC 5 Alpha 7 MdCheckboxModule throws error "No value accessor for form control"

[naveedahmed1]

Check below Checkbox which was working perfectly with RC 4 and Alpha 6

<md-checkbox [attr.value]="item.id" [(ngModel)]="item.selected"></md-checkbox>

is now throwing the below error:

ORIGINAL EXCEPTION: No value accessor for form control with unspecified name

[kara]

Can you repro in a plunker? It looks like the md-checkbox directive isn't being found, which could be an issue with how your modules are set up.

[naveedahmed1]

Hello @kara thank you for your reply.

Can you please try the following:

import {Component} from '@angular/core';


export interface Task {
  name: string;
  completed: boolean;
  subtasks?: Task[];
}

@Component({
  moduleId: module.id,
  selector: 'md-checkbox-demo-nested-checklist',
  styles: [`
    li {
      margin-bottom: 4px;
    }
  `],
  templateUrl: 'nested-checklist.html',
})
export class MdCheckboxDemoNestedChecklist {
  tasks: Task[] = [
    {
      name: 'Reminders',
      completed: false,
      subtasks: [
        { name: 'Cook Dinner', completed: false },
        { name: 'Read the Material Design Spec', completed: false },
        { name: 'Upgrade Application to Angular2', completed: false }
      ]
    },
    {
      name: 'Groceries',
      completed: false,
      subtasks: [
        { name: 'Organic Eggs', completed: false },
        { name: 'Protein Powder', completed: false },
        { name: 'Almond Meal Flour', completed: false }
      ]
    }
  ];

  allComplete(task: Task): boolean {
    let subtasks = task.subtasks;
    return subtasks.every(t => t.completed) ? true
        : subtasks.every(t => !t.completed) ? false
        : task.completed;
  }

  someComplete(tasks: Task[]): boolean {
    const numComplete = tasks.filter(t => t.completed).length;
    return numComplete > 0 && numComplete < tasks.length;
  }

  setAllCompleted(tasks: Task[], completed: boolean) {
    tasks.forEach(t => t.completed = completed);
  }
}

Ref: https://github.com/angular/material2/blob/master/src/demo-app/checkbox/checkbox-demo.ts

Template:

<h2>Tasks</h2>
<ul>
  <li *ngFor="let task of tasks">
    <md-checkbox [(ngModel)]="task.completed"
                 [checked]="allComplete(task)"
                 [indeterminate]="someComplete(task.subtasks)"
                 (change)="setAllCompleted(task.subtasks, $event.checked)">
      <h3>{{task.name}}</h3>
    </md-checkbox>
    <ul>
      <li *ngFor="let subtask of task.subtasks">
        <md-checkbox [(ngModel)]="subtask.completed">
          {{subtask.name}}
        </md-checkbox>
      </li>
    </ul>
  </li>
</ul>

Ref: https://github.com/angular/material2/blob/master/src/demo-app/checkbox/nested-checklist.html

With Angular 2 RC 5 Material 2 RC 7, it throws the below error:

No value accessor for form control with unspecified name

In NgModule I have added MdCheckboxModule.

[m0t0r]

@naveedahmed1 check this plunker with Angular RC5 and Material2 alpha.7-2, checkboxes work perfectly. You problem might be that you didn't import MdCheckboxModule into your module. Make sure you use latest version of angular with latest material2 as they both use NgModules.

[naveedahmed1]

Thank you so much @kara and @m0t0r . I have traced the error. Actually I was using
ng2-charts plugin, and inspecting its code I found that it had an unnecessary import of form directives (common_1.FORM_DIRECTIVES) I removed that and its working perfectly. Since the error message seemed to be related to forms, I thought it would be related to the material form components.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}