javascript - FormControl ile mat-slide-toggle nasıl kullanılır?

Bu cevapta, böyle bir şey yapabilmemiz gerektiği söyleniyor:

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

Ancak bunu bu Stackblitz'te deniyorum ve şu hatayı üretiyor:

src/app/app.component.html dosyasında hata (1:19) 'FormControl' tipi 'string | number' tipine atanamaz. 'FormControl' tipi 'number' tipine atanamaz.

Cevap #1

Bu, FormControl'ü nasıl kullandığınıza bağlıdır; bunu bir FormGroup içinde kullandığınızda, form kontrollerini form grubu içinde formControlName kullanarak bildirmeniz gerekir, şöyle:

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

Ama eğer sadece tek bir veya basit bir FormControl gerekiyor ise, onu şöyle tanımlayabilirsiniz:

<input [formControl]="myInput"/>

Bu sizin durumunuz, bu yüzden yönergenizi [formControlName] yerine [formControl] olarak değiştirin:

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

Cevap #2

Örnek :

.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));
  }
}

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

İlgili makaleler