vendredi 12 février 2021

Angular two checkboxes dependency

I'm trying to program two checkboxes which are dependent on each other.

Goal is: just one of the checkboxes should be checked. (I don't want to use Radio button) Problem is: for example,the checkbox "ok" is checked, when you want to check the other checkbox "notOk" the page will lag and you have to click one more to make the changes, which will call the function another time.

Edit 1: I need the 2 variables for my database.

.HTML
<p>test works!</p>
<mat-checkbox  [checked]=ok label="OK" (change)="changeOk()"> </mat-checkbox>
<mat-checkbox  [checked]=notOk label="not OK" (change)="changeNotOk()"></mat-checkbox>
.ts
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  ok: boolean;
  notOk : boolean;

  ngOnInit(): void {
    this.ok = false;
    this.notOk = false;
  }

  constructor() {
  }

  changeOk() {
    if (this.ok) {
      this.ok = false;
      this.notOk = false;
    }
    else {
      this.ok = true;
      this.notOk = false;
    }
  }

  changeNotOk() {
    if (this.notOk ) {
      this.ok = false;
      this.notOk = false;
    }
    else {
      this.notOk = true;
      this.ok = false;
    }
  }
}




Aucun commentaire:

Enregistrer un commentaire