angular - toggle değiştiğinde slide-toggle metnini değiştir

Uygulamamda temel bir kaydırmalı anahtar (slide-toggle) var.
Anahtarın açık olup olmadığına göre kaydırmalı anahtarın metnini değiştirmek istiyorum. Temelde, düğme açıldığında farklı bir metin göstermek istiyorum.

slide-toggle'ın toggleChange() metodunu kullanmayı denedim ama sayfayı yeniden yüklediğimde o metni gösteremiyorum.
Ayrıca fonksiyon toggle değiştiğinde çağrıldığı için, toggle kapalı duruma geçtiğinde bile metin görünür çünkü toggle eventi tetikleniyor. Buton toggle edildiğinde metni değiştirmek istiyorum ama sadece ayarları kaydet butonuna tıklandığında toggle edilmiş metni kaydetmek istiyorum. Metin mesajını saklamak için session veya local storage kullanmam gerekecek sanırım.

Şimdi ne yapacağımı bir türlü anlayamıyorum.

Lütfen yardım edin.
Şimdiden teşekkürler.

İşte benim ts kodum

export class PolicyComponent implements OnInit {

  formGroup: FormGroup;
  policy3: boolean=false;
  policy4: boolean=false;
  message:string="Message1";
  test:boolean=false;

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

  ngOnInit() {


  this.formGroup = this.formBuilder.group({
      Policy1: new FormControl(false, []),
      Policy2: new FormControl(false, [])
  });
  this.policyService.getPolicy().subscribe((response) => {
      this.serverData = response[0];
      if(this.serverData.policy1=="F")
      {
        this.policy3=false;
      }
      else this.policy3=true;

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


      this.formGroup.controls.Policy1.setValue(this.policy3);
      this.formGroup.controls.Policy2.setValue(this.policy4);
  });
  // if(this.formGroup.controls.Policy1.value)
  // {
  //   this.message="Message1";
  // }
  // else if(!this.formGroup.controls.Policy1.value){
  //   this.message="Message2";

  // }
   // 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";
    }


    console.log("Policy2::"+this.formGroup.controls.Policy2.value);
    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.policy3 = !this.policy3;
    this.disable=false;
  }

  onChange1(ob: MatSlideToggleChange) {
    // this.policy4 = !this.policy4;
    this.message="Slide";
    this.disable=false;
  }
  displayMessage()
  { console.log("Value is:"+this.formGroup.controls.Policy1.value);

    if(!this.formGroup.controls.Policy1.value)
    {
      this.message="Message1";
    }
    else if(this.formGroup.controls.Policy1.value){
      this.message="Message2";

    }

   }
}

İşte benim şablon kodum:

<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
  <mat-action-list>
    <mat-list-item > <mat-slide-toggle       
      (change)="onChange($event)"  (toggleChange)="displayMessage()"  formControlName="Policy1" >{{message}}</mat-slide-toggle></mat-list-item> 
    <mat-list-item > <mat-slide-toggle  (change)="onChange($event)"  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>

Cevap #1

ve başka bir çözüm

<mat-slide-toggle #slide formControlName="enabled">
     <span>{{slide.checked?'label 1':'label 2'}}</span>
</mat-slide-toggle>

Cevap #2

Lütfen toggleChange hakkında aşağıdakilere dikkat edin, bunun nedeni aynı zamanda bir dragChange etkinliğine sahip olmalarıdır.

Kullanıcı kayan geçiş değerini değiştirmek için sürüklediğinde olay tetiklenmez.

Kişisel tercihim, bu senaryoda (change) kullanmak ve olayın e.checked değerinin true mi yoksa false mi olduğunu değerlendirmek olurdu... bu yaklaşımda, geçişin bir sürükleme olayı olup olmadığı önemli değil, yönteminiz herhangi bir değişiklikte çağrılır ve mesaj yalnızca geçiş checked durumundayken ayarlanır.

<mat-slide-toggle       
      (change)="onChange($event);displayMessage($event)"
        formControlName="Policy1" >{{message}}</mat-slide-toggle>
</mat-list-item>

 displayMessage(e){
    if(e.checked)
      this.message = 'toggled'
    else
      this.message = 'Slide me!'
  }

Stackblitz

https://stackblitz.com/edit/angular-g9w2p8?embed=1&file=app/slide-toggle-overview-example.ts

İlgili makaleler