I can't make the initialization of a mat-slide-toggle in a Reactive Form.
I have something like in the template
<mat-slide-toggle name="X" formControlName="X" color="primary"></mat-slide-toggle>
and in the controller I am doing
X: new FormControl(true, [
Validators.required
])
I have also tried with 1 or 0 or false instead of true but I didn't get it with a default value selected.
I would appreciate if someone could help me, many thanks.
MatSlideToggle uses an internal <input type="checkbox"> with role="switch" to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the <mat-slide-toggle> element.
IMHO, there's some issue with your code. You should do something like this:
<mat-slide-toggle [formControlName]="X" [checked]="X.value" (click)="X.value =!X.value" color="primary">{{X.value ? 'ON' : 'OFF'}}</mat-slide-toggle>
And in controller you'll need to assign the formControl
so, use =
instead of :
ie:
X = new FormControl(true, [
Validators.required
]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With