Вызовите другой метод onChange для переключения слайдов

Question

Я создаю простое приложение с двумя переключателями. Я сохраняю состояние переключателя в БД. Моя проблема в том, что когда я переключаю один слайд-переключатель, значение другого слайд-переключателя также изменяется. У меня есть отдельные методы onChnage () для обоих переключателей, но все же я получаю ту же проблему. Пожалуйста, помогите. Заранее спасибо:

Вот мой код TS:

export class PolicyComponent implements OnInit {

  @Output() change: EventEmitter<MatSlideToggleChange>;
  formGroup: FormGroup;
  policy1: boolean=false;
  policy2: boolean=false;

  disable:boolean=true;
serverData:any
  constructor(
    private formBuilder: FormBuilder,private policyService:PolicyService
  ) { }

  ngOnInit() {
 //   this.filteringSchedule = JSON.parse(sessionStorage.getItem('toggleButtonState'));

 this.policyService.getPolicy().subscribe(
  (response)=>{
    console.log(response);   

    this.serverData = response[0]; 
    console.log(this.serverData)
    if(this.serverData.policy1=="F")
    {
      this.policy1=false;
    }
    else this.policy1=true;

    if(this.serverData.policy2=="F")
    {
      this.policy2=false;
    }
    else this.policy2=true;



 }

 )

    this.formGroup = this.formBuilder.group({
      Policy1:new FormControl( this.policy1,[]),
      Policy2: new FormControl( this.policy2,[])

    });

   // this.policyService.getUserById(+ localStorage.getItem("policyId")).subscribe();
}

  onFormSubmit() {
    console.log("Policy1::"+this.formGroup.controls.Policy1.value);
    if(this.formGroup.controls.Policy1.value)
    {
      this.serverData.policy1="T";
    }
    else{
      this.serverData.policy1="F";
    }

    if(this.formGroup.controls.Policy2.value)
    {
      this.serverData.policy2="T";
    }
    else{
      this.serverData.policy2="F";
    }
    //this.policyService.updatePolicy(this.policy.id,{policy1:this.policy.policy1}).subscribe(err=>{console.log(err)});
    this.policyService.updateUser(this.serverData).subscribe(err=>{console.log(err)});
 //   alert(JSON.stringify(formValue, null, 2));
 this.disable=true;

  }

  onChange(ob: MatSlideToggleChange) {
    this.policy1 = !this.policy1;
    this.disable=false;
  }

  onChange1(ob: MatSlideToggleChange) {
    this.policy2 = !this.policy2;
    this.disable=false;
  }
}

Ниже мой шаблон:

<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
  <mat-action-list>
    <mat-list-item > <mat-slide-toggle       
      (change)="onChange($event)"  [checked]="policy1"  formControlName="Policy1" >Policy1</mat-slide-toggle></mat-list-item> 
    <mat-list-item > <mat-slide-toggle  (change)="onChange1($event)" [checked]="policy2" formControlName="Policy2">Policy2</mat-slide-toggle></mat-list-item>

  </mat-action-list>
  <p>Form Group Status: {{ formGroup.status}}</p>

  <button mat-rasied-button [disabled]="disable" type="submit">Save Settings</button>
</form>

Answer 1

Вот ответ на ваш вопрос

  <mat-card class="result">
  <mat-card-content>
    <h2 class="example-h2">Result</h2>

    <section class="example-section">
      <mat-slide-toggle
          [(ngModel)]="checked1"
          class="example-margin"
          [color]="color"
          (change)="changed()">
        Slide me! {{checked}}
      </mat-slide-toggle>

    </section>
     <mat-slide-toggle
          [(ngModel)]="checked2"
          class="example-margin"
          [color]="color"
          (change)="changed2()">
        Slide me! {{checked}}
      </mat-slide-toggle>
  </mat-card-content>
</mat-card>

Вот код ts

  export class SlideToggleConfigurableExample {
  color = 'accent';
  checked1 : boolean=true;
  checked2:boolean=false;
  disable:any;

  changed(){
  //  this.checked1 = !this.checked2;
    this.checked1=true;
  }
  changed2(){
    // this.checked1 = !this.checked2;
    this.checked2=false;
  }
}
[stackblitz link which is working,Please refer][1]

Answer 2

У вас двойная привязка к вашим mat-slide-toggle элементам, поэтому Angular запутывается и не знает, какое значение поместить туда.

<mat-action-list>
   <mat-list-item > 
      <mat-slide-toggle (change)="onChange($event)"  
      [checked]="policy1" <----------------------------------first binding
      formControlName="Policy1"><----------------------------second binding
      Policy1</mat-slide-toggle>
   </mat-list-item> 
   <mat-list-item > 
      <mat-slide-toggle (change)="onChange1($event)" 
      [checked]="policy2" <----------------------------------first binding
      formControlName="Policy2"><----------------------------second binding
      Policy2</mat-slide-toggle>
   </mat-list-item>
</mat-action-list>

По моему опыту, это вызывает эту проблему.Правильный способ использования реактивных форм в Angular - это использование двухстороннего связывания со свойством formControlName="...", тогда при создании формы вам нужно сделать:

ngOnInit() {
    this.formGroup = this.formBuilder.group({
        Policy1: new FormControl(false, []),
        Policy2: new FormControl(false, [])
    });
    this.policyService.getPolicy().subscribe((response) => {
        this.serverData = response[0];
        this.formGroup.controls.Policy1.setValue(this.serverData.policy1=="F");
        this.formGroup.controls.Policy2.setValue(this.serverData.policy2=="F");
    });
}

и HTML:

<mat-action-list>
   <mat-list-item > 
      <mat-slide-toggle (change)="onChange($event)"  
      formControlName="Policy1"><----------------------------Only!!
      Policy1</mat-slide-toggle>
   </mat-list-item> 
   <mat-list-item > 
      <mat-slide-toggle (change)="onChange1($event)" 
      formControlName="Policy2"><----------------------------Only!!
      Policy2</mat-slide-toggle>
   </mat-list-item>
</mat-action-list>