垫形场内的角材料垫-滑动-切换

Question

如果我在mat-form-field内有一个mat-slide-toggle，则会出现错误：

  

错误：mat-form-field必须包含MatFormFieldControl

我希望在mat-form-field内放入mat-slide-toggle，以便获得样式。任何想法为什么我会收到此错误？ 是mat-slide-toggle不是mat-form-field吗？

以下是我目前拥有的一个例子：

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

Answer 1

但是，您可以在mat-form-field字段中放置一个隐藏的文本字段以满足要求，并且，如果需要的话，可以将所有值绑定在一起，如果要获得与其他字段相同的外观。 / p>

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

Answer 2

根据官方文档，您无法执行此操作（link）。

  

以下Angular Material组件旨在在内部工作   <mat-form-field>：

     

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

Answer 3

我基于多个答案提出了两种略有不同的hack，没有下划线

上面带有可扩展的可点击空白的标签，使用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>

Answer 4

不幸的是，当垫滑动滑块位于其中时，垫形字段不起作用/不起作用。我必须自己找出困难的方式。

尝试以下方法：

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

Answer 5

尝试添加隐藏的输入字段

<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>