CODEWITHSUNDEEP
javascripthtmlangularforms
JSkyS
JSkyS

Reputation: 443

Why can't I move a mat-slide-toggle within the form tags?

I have a working slide toggle that is working perfectly except when I want to change the location for the toggle on the view to next to the form it doesn't work. Once I put it within the form tag the toggle will stop changing on click and will remain false.

I have looked at other examples but they are not using mat form field as is done in this code. I need to put the toggle next to the submit button but the mat form field seems to make it not work. Also I tried to add the same class to the form tag but that doesn't seem to work. 

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

Upvotes: 0

Views: 529

Answers (1)

Alexander
Alexander

Reputation: 3247

[(ngModel)]="checked"

When you put the slide toggle out the form, your model is not binding to the form.

Why do you want to put it outside the form?

Upvotes: 1

Related Questions