[feature request] md-checkbox-group to make checkbox work with reactive forms
See original GitHub issuefeature 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:
- Created 7 years ago
- Comments:5 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Why is this? I don’t see why a checkbox group would be necessary.
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.