question-mark
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.

[feature request] md-checkbox-group to make checkbox work with reactive forms

See original GitHub issue

feature request:

Implement <md-checkbox-group> element, which would work same way as <md-radio-group>

What is the expected behavior?

Introducing this element, would be great way to deal with reactive forms, in same way as with radios:

<md-radio-group [formControl]="myForm.controls['radio']">
      <md-radio-button *ngFor="let option of radioOptions" [value]="option"></md-radio-button>
    </md-radio-group>

component:

export class MyComponent implements OnInit {

radioOptions: RadioInput[] = [
    new RadioInput("name1", "value1"),
    new RadioInput("name2", "value2"),
    new RadioInput("name3", "value3")
  ];

radioInput: RadioInput = this.radioOptions[1];

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      "radio": this.radioInput,
    });
  }
}

For checkbox, we would do something like that:

<md-checkbox-group [formControl]="myForm.controls['checkboxes']">
      <md-checkbox *ngFor="let option of checkboxOptions" [value]="option"></md-radio-button>
    </md-radio-group>

component:

export class MyComponent implements OnInit {

checkboxOptions: CheckboxInput[] = [
    new CheckboxInput("name1", "value1"),
    new CheckboxInput("name2", "value2"),
    new CheckboxInput("name3", "value3"),
  ];

checkboxInput: CheckboxInput[] = [this.checkboxOptions[0], this.checkboxOptions[2]];

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      "checkboxes": this.checkboxInput,
    });
  }
}

What is the use-case or motivation for changing an existing behavior?

At this moment it is impossible to with checkboxes using reactive forms

Which versions of Angular, Material, OS, browsers are affected?

@angular2-material: 2.0.0-alpha.7-3, @angular: 2.0.0-rc.5 @angular/forms: 0.3.0

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
jelbourncommented, Nov 4, 2016

At this moment it is impossible to with checkboxes using reactive forms

Why is this? I don’t see why a checkbox group would be necessary.

0reactions
angular-automatic-lock-bot[bot]commented, Sep 7, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Implementing Grouping Checkbox Behavior with Angular ...
We create a FormGroup that contains one FormArray . For each item, we create a new FormControl and add it to our array....
Read more >
Angular + Reactive Forms - Required Checkbox Example
This is a quick example of how to implement a required checkbox field in Angular with Reactive Forms.
Read more >
Angular 14 Checkbox Tutorial with Multi Checkbox Validation
Learn how to create, select and unselect multiple checkboxes and validate checkboxes with Angular Reactive Forms.
Read more >
Angular ReactiveForms: Producing an array of checkbox ...
This way it can work for multiple checkboxes arrays in one form. Just set the name of the controls array to connect each...
Read more >
CheckboxControlValueAccessor - Angular
The following example shows how to use a checkbox with a reactive form. content_copy const rememberLoginControl = new FormControl ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found