Изменить текст ползункового переключателя при смене переключателя

Question

У меня есть базовое переключение слайдов в моем приложении.
Я хочу изменить текст переключателя слайдов в зависимости от того, переключен он или нет.В основном отображать другой текст, когда кнопка переключается.

Я пытался использовать метод toggleChange () для ползункового переключателя, но я не могу показать этот текст при перезагрузке.
Кроме того, поскольку функция вызывается при переключении переключателя, он отображает текст, даже когда переключение происходитв выключенное состояние при срабатывании события переключения.Я хочу изменить текст, когда кнопка переключена, но сохранить этот текст, только когда нажата кнопка настройки сохранения. Я думаю, что мне придется использовать сеанс или локальное хранилище для хранения текстового сообщения

Я могуКажется, не понимаю, что делать сейчас.

Пожалуйста, помогите.
Заранее спасибо.

Вот мой код TS

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

    }

   }
}

Вот мой код шаблона:

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

Answer 1

Обратите внимание на следующее относительно toggleChange, поэтому у них также есть событие dragChange.

Событие не вызывается, когда пользователь перетаскивает значение переключателя слайда.

В этом сценарии я бы предпочел использовать (change) и оценитьсобытие, чтобы увидеть, является ли e.checked true или false ... при таком подходе не будет иметь значения, было ли переключение событием перетаскивания или нет, ваш метод вызывался бы при любом изменении и устанавливал только сообщениеесли переключатель находится в состоянии checked.

<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