ฉันนำเสนอเคล็ดลับสองข้อที่แตกต่างกันเล็กน้อยโดย ไม่มีการขีดเส้นใต้ โดยอิงตามคำตอบหลายข้อ

ป้ายกำกับด้านบนพร้อมพื้นที่สีขาวแบบขยายที่สามารถคลิกได้ ใช้ CSS

<mat-form-field floatLabel="always" appearance="none">
  <mat-label>Override Speed</mat-label>
  <mat-slide-toggle [(ngModel)]="Override"><span class="text-invisible">Override Speed</span></mat-slide-toggle>
  <textarea matInput hidden></textarea>
</mat-form-field>

.text-invisible {
  opacity: 0;
}

ป้ายกำกับทางด้านขวา ไม่มี CSS

<mat-form-field floatLabel="always" appearance="none">
  <mat-slide-toggle [(ngModel)]="Override">Override Speed</mat-slide-toggle>
  <textarea matInput hidden></textarea>
</mat-form-field>

อย่างไรก็ตาม คุณสามารถใส่ฟิลด์ข้อความที่ซ่อนอยู่ในฟิลด์ mat-form-field เพื่อให้เป็นไปตามข้อกำหนด และหากจำเป็น คุณสามารถรวมค่าทั้งหมดเข้าด้วยกันได้ หากต้องการให้มีลักษณะเหมือนกับฟิลด์อื่นๆ หากจำเป็น

<mat-form-field floatLabel="always">
        <mat-label>Label</mat-label>
        <mat-slide-toggle>Raw</mat-slide-toggle>
        <textarea matInput hidden></textarea>
    </mat-form-field>

ลองเพิ่มช่องป้อนข้อมูลที่ซ่อนอยู่

<mat-form-field>
  <mat-slide-toggle class="example-margin" [color]="color" [checked]="checked"
    [disabled]="disabled">
    Cumulative
  </mat-slide-toggle>
  <input matInput #value hidden />
</mat-form-field>

ตามเอกสารอย่างเป็นทางการ คุณไม่สามารถทำเช่นนี้ได้ (ลิงก์)

ส่วนประกอบวัสดุเชิงมุมต่อไปนี้ได้รับการออกแบบมาให้ทำงานภายใน <mat-form-field>:

• <input matNativeControl> & <textarea matNativeControl>
• <select matNativeControl>
• <mat-select>
• <mat-chip-list>

น่าเสียดายที่ Mat-Form-Fields ไม่ทำงาน/ทำงานเมื่อมีการสลับ mat-slide อยู่ภายใน ฉันต้องค้นหาสิ่งนี้ด้วยวิธีที่ยากลำบากด้วยตัวเอง

ลองสิ่งนี้แทน:

<div fxFlexFill *ngSwitchCase="'mat-slide-toggle'">
    <mat-slide-toggle>{{el.text}}</mat-slide-toggle>
</div>