为什么我不能在form标签内移动mat-slide-toggle？

Question

我有一个工作的幻灯片切换开关，除了我想将切换视图的位置更改为窗体旁边的开关时，它工作正常。 一旦将其放入form标记中，切换按钮将在单击时停止更改，并保持为false。

我看了其他示例，但是他们没有像此代码中那样使用mat表单字段。 我需要将切换按钮置于“提交”按钮旁边，但是“ 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"

当您将幻灯片切换出表单时，您的模型未绑定到表单。

为什么要将其放在表格之外？