Блог

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

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

Кажется, я не могу понять, что теперь делать.

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

Вот мой код 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>
 

Пожалуйста, обратите внимание на следующее 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=1amp;file=app/slide-toggle-overview-example.ts

и другое решение

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

Это приятно и просто. ключ устанавливает идентификатор для самого элемента управления, чтобы вы могли получить ссылку на его состояние.

 <mat-slide-toggle class="ml-3" formControlName="paid" #paid >
   <small *ngIf="paid.checked;else notSelected" >Paid</small>
   <ng-template #notSelected>
          <small>Click to set as paid</small>
   </ng-template>
</mat-slide-toggle>
 

Вы можете попробовать этот фрагмент:

 <mat-slide-toggle formControlName="Policy1">
  <span *ngIf="!Policy1.value">Message false</span>
  <span *ngIf="Policy1.value">Message true</span>
</mat-slide-toggle>