如何在 FormControl 中使用 mat-slide-toggle？答案

【问题标题】：How to use mat-slide-toggle with FormControl?如何在 FormControl 中使用 mat-slide-toggle？
【发布时间】：2020-10-06 09:09:04
【问题描述】：

在this answer 中说我们应该能够做这样的事情：

<mat-slide-toggle [formControlName]="toggleControl">Slide</mat-slide-toggle>

但是我在this Stackblitz 中尝试了它，它会产生错误：

src/app/app.component.html 中的错误 (1:19) 类型 'FormControl' 不可分配给类型 'string |数字'。类型“FormControl”不可分配给类型“数字”。

【问题讨论】：

标签： javascript angular typescript angular-material

【解决方案1】：

这取决于您使用 FormControl 的方式，当您在 FormGroup 中使用它时，您需要使用 formControlName 在表单组内声明表单控件，如下所示：

<form [formGroup]="myForm">
  <input type="text" formControlName="myInput">
</form>

但如果您只需要一个或简单的FormControl，您可以将其声明为：

<input [formControl]="myInput"/>

这是您的情况，所以只需将您的指令更改为 [formControl] 而不是 [formControlName]：

<mat-slide-toggle [formControl]="toggleControl">Slide</mat-slide-toggle>

【讨论】：

【解决方案2】：

尝试使用formControlName="toggleControl" 而不是[formControlName]="toggleControl"。错误消失了。

您也可以查看文档here。

【讨论】：

【解决方案3】：

例子：

.html

<form class="example-form" #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>

      <mat-slide-toggle ngModel name="enableWifi">Enable Wifi</mat-slide-toggle>
      <mat-slide-toggle ngModel name="acceptTerms" required>Accept Terms of Service</mat-slide-toggle>

      <button mat-raised-button type="submit">Save Settings</button>
</form>

.ts

export class SlideToggleFormsExample {
  formGroup: FormGroup;

  constructor(formBuilder: FormBuilder) {
    this.formGroup = formBuilder.group({
      enableWifi: '',
      acceptTerms: ['', Validators.requiredTrue]
    });
  }

  onFormSubmit() {
    alert(JSON.stringify(this.formGroup.value, null, 2));
  }
}

来源： https://stackblitz.com/angular/gjjngpabxnlv?file=src%2Fapp%2Fslide-toggle-forms-example.ts

【讨论】：