如何更改 Angular mat-slide-toggle 和 mat-checkbox 上的 VISUAL 状态

Question

I have an Angular form that has a select box of objects created from database records. I want to populate the form with the object values when one is selected.

My Angular app has an array of objects that is mapped to form control text boxes and mat-slide-toggles. My form populates with the correct values from the array and when I click submit the correct values show. The problem I have is the slide toggles and check-boxes don't VISUALLY update themselves based on the boolean (1/0) values in the array when an entry is selected from the drop down.

Even though the form values submitted are correct, the DISPLAY value is wrong not representing the back-end data correctly. How do you VISUALLY update the slide toggles and check-boxes so they respond to the array object true/false value?

Do I need to use getElementById to update these controls since the form has already been rendered?

The setValue initializes the text boxes visually, but I can't get the slide toggles to visually show their state correctly. As I said before, everything shows their values correctly when I submit the form.

Angular HTML

   <form [formGroup]="collectionUpdateForm" (ngSubmit)="updateCollectionData(collectionUpdateForm.value)">
      <!--Again as in ts file. For small forms this is fine, but you can make these dynamically with ngFor or something-->
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Select Language</mat-label>
         <mat-select formControlName="languageID" [(ngModel)]="languageSelected">
            <mat-option *ngFor="let language of languages" [value]="language.languageID">
               {{language.languageName}}
            </mat-option>
         </mat-select>
      </mat-form-field>
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Select Category</mat-label>
         <mat-select formControlName="categoryID" [(ngModel)]="categorySelected" (click)="getCollections()">
            <mat-option *ngFor="let category of categories" [value]="category.categoryID">
               {{category.categoryName}}
            </mat-option>
         </mat-select>
      </mat-form-field>
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Collection Name</mat-label>
         <input matInput formControlName="collectionName">
      </mat-form-field>
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Event Name</mat-label>
         <input matInput formControlName="eventName">
      </mat-form-field>
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Collection Description</mat-label>
         <textarea matInput formControlName="collectionDesc" cdkTextareaAutosize></textarea>
      </mat-form-field>
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Product ID</mat-label>
         <input matInput formControlName="productID">
      </mat-form-field>
      <mat-slide-toggle formControlName="onlineOnly" [(ngModel)]="onlineOnlyChecked" (input)="onlineOnlyChecked">Online Only</mat-slide-toggle>
      <mat-slide-toggle formControlName="display" [(ngModel)]="displayChecked" (input)="displayChecked">Display</mat-slide-toggle>
      <button mat-raised-button color="primary">Update</button>
   </form>

Angular Typescript

   collectionUpdateForm = new FormGroup
   (
      {
         languageID: new FormControl(),
         categoryID: new FormControl(),
         collectionID: new FormControl(),
         collectionName: new FormControl(),
         eventName: new FormControl(),
         collectionDesc: new FormControl(),
         productID: new FormControl(),
         onlineOnly: new FormControl(),
         display: new FormControl(),
      }
   )

   getCollectionSelected()
   {
      //alert( "Language = " + this.selectedCollection?.languageID )
      //alert( "Channel = " + this.channelSelected )
      //alert( "Category = " + this.categorySelected )
      this.collectionUpdateForm.setValue( this.selectedCollection as any )
      //alert( "Online Only = " + this.selectedCollection?.onlineOnly )
      //this.onlineOnlyChecked = false;
      //this.displayChecked = false;

      //this.channelID = this.selectedCollection?.channelID;
      //this.languageID = this.selectedCollection?.languageID;
      //this.collectionID = this.selectedCollection?.collectionID;
   }

Angular Service

export interface MediaCollectionInfoInterface
{
   collectionID: number;
   collectionName: string;
   eventName: string;
   categoryID: number;
   productID: string;
   languageID: string;
   onlineOnly: number;
   collectionDesc: string;
   display: number;
}

Answer 1

After trial and error, I found the following solution:

<mat-slide-toggle formControlName="onlineOnly" [checked]="onlineOnlyChecked" >Online Only <mat-slide-toggle formControlName="display" [checked]="displayChecked" >Display

Both onlineOnlyChecked and displayChecked are boolean variables that get their values assigned from the array object.