Блог

У меня есть рабочий слайд-переключатель, который работает отлично, за исключением случаев, когда я хочу изменить расположение переключателя в представлении на рядом с формой, он не работает. Как только я помещу его в тег формы, переключатель перестанет меняться при нажатии и останется 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>
 

 [(ngModel)]="checked"
 

Когда вы выводите слайд-переключатель из формы, ваша модель не привязывается к форме.

Почему вы хотите поместить его за пределы формы?