如何在 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&nbsp;[formGroup]="myForm">&nbsp; &nbsp;<input&nbsp;type="text"&nbsp;formControlName="myInput"> &nbsp;</form>但是，如果您只需要一个或简单的FormControl，则可以将其声明为：<input&nbsp;[formControl]="myInput"/>这是您的情况，因此只需将您的指令更改[formControl]为[formControlName]：<mat-slide-toggle&nbsp;[formControl]="toggleControl">Slide</mat-slide-toggle>

Answer 2

例子：.html<form class="example-form" #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>&nbsp; &nbsp; &nbsp; <mat-slide-toggle ngModel name="enableWifi">Enable Wifi</mat-slide-toggle>&nbsp; &nbsp; &nbsp; <mat-slide-toggle ngModel name="acceptTerms" required>Accept Terms of Service</mat-slide-toggle>&nbsp; &nbsp; &nbsp; <button mat-raised-button type="submit">Save Settings</button></form>.tsexport class SlideToggleFormsExample {&nbsp; formGroup: FormGroup;&nbsp; constructor(formBuilder: FormBuilder) {&nbsp; &nbsp; this.formGroup = formBuilder.group({&nbsp; &nbsp; &nbsp; enableWifi: '',&nbsp; &nbsp; &nbsp; acceptTerms: ['', Validators.requiredTrue]&nbsp; &nbsp; });&nbsp; }&nbsp; onFormSubmit() {&nbsp; &nbsp; alert(JSON.stringify(this.formGroup.value, null, 2));&nbsp; }}来源： https ://stackblitz.com/angular/gjjngpabxnlv?file=src%2Fapp%2Fslide-toggle-forms-example.ts

Answer 3

尝试使用formControlName="toggleControl"而不是[formControlName]="toggleControl".&nbsp;错误消失了。您还可以在此处查看文档。