如何通过确认进行mat-slide-toggle

Posted 2021-04-13

我在下面的代码中遇到的问题是，当我点击确认时，开关会发生变化。我希望只有在单击“确定”时才能更改开关。

你能建议我吗？如何确认mat-slide-toggle？

html代码：

<form [formGroup]="myform" class="col s12">
<div *ngFor="let item of homeboxsp;let i = index">
            <section class="example-section">
            <mat-slide-toggle value="active" formControlName="active-{{i}}" class="example-margin" [checked]="item.active === '1'"(click)="onActiveHomeboxP()"> {{item.active}}
            </mat-slide-toggle>
        </section>
</div>
</form>

ts代码：

export class AppComponent {
  public homeboxsp: HomeboxP[] = [];
  myform: FormGroup;
  checkedBtn: boolean;
  constructor(public service: Service) {
  }
  ngOnInit() {
    this.populateFormHomeboxP();
  }
  populateFormHomeboxP() {
    this.homeboxsp = this.service.getData();


    let controls = {
      'homeboxpackage_id': new FormControl('', Validators.required)
    };

    for (let i = 0; i < this.homeboxsp.length; i++) {
      controls['active-' + i] = new FormControl(this.homeboxsp[i].active == '1', Validators.required)
    }
    this.myform = new FormGroup(controls);
    this.patchForm();
  }
  patchForm() {
    this.myform.patchValue({
      homeboxpackage_id: this.homeboxsp.map(x => x.homeboxpackage_id),
    });
    console.log(this.homeboxsp.map(x => x.active))
    console.log(this.homeboxsp.map(x => x.homeboxpackage_id))
  }
  onActiveHomeboxP() {
    if (confirm('Are you sure?')) {
      let edigps = this.myform.value
      console.log(edigps)
      console.log('true')
    } else {
      this.checkedBtn = !this.checkedBtn;
    }
  }
}

答案

此代码是多个交换机的示例代码，您可以添加额外的逻辑：

HTML

<section class="example-section">
  <div *ngFor="let item of homeboxsp;let i = index">
    <mat-slide-toggle class="example-margin" [(ngModel)]="checkedBtn[i]" (click)="onActiveHomeboxP(i)">
    </mat-slide-toggle>
  </div>
</section>

TS

  checkedBtn: any[]=[];
  homeboxsp = ['a','b','c'];

  constructor() {    
  }

  ngOnInit() { }

  onActiveHomeboxP(i:any) {
    if (confirm('Are you sure?')) {

      console.log('true')
    } else {
      this.checkedBtn[i] = !this.checkedBtn[i];
    }


  }