Как использовать mat-slide-toggle с FormControl?

Question

В этом ответе говорится, что мы должны иметь возможность сделать что-то вроде этого:

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

Однако я пробую это в этом Stackblitz и возникает ошибка:

Ошибка в src / app / app.component. html (1:19) Тип FormControl не может быть назначен типу string | число'. Тип FormControl нельзя присвоить типу number.

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

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". Ошибка исчезла.

Вы также можете посмотреть документацию здесь .