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

Question

在这个答案中，它说我们应该能够做这样的事情：<mat-slide-toggle [formControlName]="toggleControl">Slide</mat-slide-toggle>但是我在这个 Stackblitz中尝试了它，它会产生错误：src/app/app.component.html 中的错误 (1:19) 类型 'FormControl' 不可分配给类型 'string | 数字'。类型“FormControl”不可分配给类型“数字”。

Answer 1

它归结为您使用 FormControl 的方式，当您在 a 中使用它时，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>

Answer 2

例子：

.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

Answer 3

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

您还可以在此处查看文档。