docs(material/slide-toggle): update changes from legacy

guides/v15-mdc-migration.md

@@ -483,10 +483,10 @@ DOM and CSS of the components, you may need to tweak some of your application's
   is the same width as the form-field
 
 ### Slide Toggle
-<!-- TODO(zarend): review -->
 
 * To improve accessibility, the MDC-based version uses `<button role="switch">` to represent the
-  toggle rather than `<input type="checkbox">`.
+  toggle rather than `<input type="checkbox">`. Slide toggle will no longer respond to native form
+  validation. Consider alternative approaches to form validation.
 
 * The touch target is much larger and more accessible. Be sure to allow enough space in your
   layout so that the touch target does not overlap other components. If you are not concerned with

src/dev-app/slide-toggle/slide-toggle-demo.html

@@ -14,9 +14,9 @@
 
   <p>Example where the slide toggle is required inside of a form.</p>
 
-  <form #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
+  <form #form="ngForm" (ngSubmit)="onFormSubmit()">
 
-    <mat-slide-toggle name="slideToggle" required ngModel>
+    <mat-slide-toggle name="slideToggle" [(ngModel)]="formToggle">
       Slide Toggle
     </mat-slide-toggle>
 

src/dev-app/slide-toggle/slide-toggle-demo.ts

@@ -19,9 +19,10 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
   imports: [FormsModule, MatButtonModule, MatSlideToggleModule],
 })
 export class SlideToggleDemo {
-  firstToggle: boolean;
+  firstToggle: boolean = false;
+  formToggle: boolean = false;
 
   onFormSubmit() {
-    alert(`You submitted the form.`);
+    alert(`You submitted the form. Value: ${this.formToggle}.`);
   }
 }

src/material/slide-toggle/slide-toggle.md

@@ -23,10 +23,10 @@ slide-toggles use the theme's accent color. This can be changed to `'primary'` o
 
 ### Accessibility
 
-`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. Avoid adding other interactive controls into the
-content of `<mat-slide-toggle>`, as this degrades the experience for users of assistive technology.
+`MatSlideToggle` uses an internal `<button role="switch">` to provide an accessible experience. This
+internal button receives focus and is automatically labelled by the text content of the
+`<mat-slide-toggle>` element. Avoid adding other interactive controls into the content of
+`<mat-slide-toggle>`, as this degrades the experience for users of assistive technology.
 
 Always provide an accessible label via `aria-label` or `aria-labelledby` for toggles without
 descriptive text content. For dynamic labels, `MatSlideToggle` provides input properties for binding