javascript - 为什么我无法在表单标签内移动垫子滑动切换？

Question

我有一个工作幻灯片切换开关，它工作得很好，除非我想将 View 上的切换开关位置更改为表单旁边，但它不起作用。一旦我将其放入表单标签中，切换按钮将在单击时停止更改并保持错误状态。

我看过其他示例，但它们没有像此代码中那样使用 mat 表单字段。我需要将切换按钮放在提交按钮旁边，但垫表单字段似乎使其不起作用。我还尝试将相同的类添加到表单标记中，但这似乎不起作用。

<div class="container w-75 example-margin">
  <div class="row text-center mx-auto">
    <form class="form-inline row text-center mx-auto" [formGroup]="slgForm">
      <div class="form-group">
        <mat-form-field class="mr-4">
          <input matInput formControlName="year" placeholder="Year">
        </mat-form-field>
        <mat-form-field class="mr-4">
          <input matInput formControlName="quarter" placeholder="Quarter">
        </mat-form-field>

        <mat-form-field class="mr-4">
          <input matInput formControlName="week" placeholder="Week">
        </mat-form-field>

        <mat-form-field class="mr-4">
          <mat-select [(ngModel)]="selectedDepartment" formControlName="dept">
            <mat-option *ngFor="let department of departments" [value]="department">
              {{department}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <button mat-raised-button (click)="submit()">Submit</button>
      </div>
    </form>
    <div>
      <mat-slide-toggle [(ngModel)]="checked"
                        class="example-margin"
                        [color]="color"
                        (change)="changed()">
        Remove {{checked}}
      </mat-slide-toggle>
    </div>
  </div>
</div>

Answer 1

[(ngModel)]="checked"

当您将滑动开关移出表单时，您的模型不会绑定(bind)到表单。

为什么要把它放在表单之外？