I have created a Custom Form Control for the Angular Material Button Toggle Group. Here is how I implemented it:
custom-button-toggle-group.component.html
<mat-button-toggle-group
(change)="onToggleGroupChange($event)"
[disabled]=disabled
[value]=value
>
<mat-button-toggle
*ngFor="let toggle of toggles"
[value]="toggle.value"
>{{ toggle.label }}</mat-button-toggle>
</mat-button-toggle-group>
custom-button-toggle-group.component.ts
import { Component, forwardRef, HostListener, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { MatButtonToggleChange } from '@angular/material/button-toggle';
export interface ButtonToggle {
value: string;
label: string;
}
@Component({
selector: 'custom-button-toggle-group',
templateUrl: './button-toggle-group.component.html',
styleUrls: ['./button-toggle-group.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR, multi: true,
useExisting: forwardRef(() => CustomButtonToggleGroupComponent),
}
]
})
export class CustomButtonToggleGroupComponent implements ControlValueAccessor {
@Input() public toggles: ButtonToggle[];
public value: string;
public disabled: boolean;
private onChange: (value: string) => void;
private onTouched: () => void;
public onToggleGroupChange({ value }: MatButtonToggleChange): void {
this.doChange(value);
}
writeValue(obj: any): void {
this.value = obj;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
setDisabledState?(isDisabled: boolean): void {
this.disabled = isDisabled;
}
private doChange(selectedValue: string): void {
this.onChange(selectedValue);
}
@HostListener('blur')
private doBlur(): void {
this.onTouched();
}
}
This way you will be able to use FormControl, FormControlName, etc. on the custom-button-toggle-group.
