Trying to show div depends on the selected checkbox values. But not working. If i check bus 12 from the checkbox i want to show bus1 and bus2. Suppose if i uncheck bus 12 i want to hide bus1 and bus2. same for other like Bus34 and Bus56. How to do it?

app.component.ts:

 for (let i = 0; i < formValue.checkboxes.length;   i) {
      const matchedVal1 = formValue.checkboxes[i];
      console.log(matchedVal1);

       if(matchedVal1 =="bus-12"){

        this.bus1 = true;
        this.bus2 = true;

       }else{
        this.bus1 = false;
        this.bus2 = false;
       }

       if(matchedVal1 =="bus-34"){

        this.bus3 = true;
        this.bus4 = true;

      }else{
        this.bus3 = false;
        this.bus4 = false;
      }


      if(matchedVal1 =="bus-56"){
        this.bus5 = true;
        this.bus6 = true;
      }else{
        this.bus5 = false;
        this.bus6 = false;
      } 

    }

Demo : https://stackblitz.com/edit/angular-checkbox-custom-value-g8wrgu?file=src/app/app.component.ts

CodePudding user response：

when you submit, check the length of checkboxes, if eq 0 hide all,

  submit() {
    const checkboxControl = this.checkboxGroup.controls.checkboxes as FormArray;
    const formValue = {
      ...this.checkboxGroup.value,
      checkboxes: checkboxControl.value.filter((value) => !!value),
    };
    this.submittedValue = formValue;
    /// hide if no select
    if(formValue.checkboxes.length == 0){
      alert("no select , hide all");
    }
    console.log(formValue);

https://angular-checkbox-custom-value-yfg1m2.stackblitz.io/

CodePudding user response：

The problem why the display of bus HTML is not work correctly is due to when every iteration of array, you will update the previous bus value from true to false.

Example:

Checked: ["bus-12", "bus-34"]

First iteration ("bus-12"):

Result:

bus1 = true;
bus2 = true;

Second iteration ("bus-34")

You will set bus1 and bus2 to false as matchedVal1 != "bus-12" but matchedVal1 == "bus-34.

bus1 = false;
bus2 = false;
bus3 = true;
bus4 = true;

In short, when you tick multiple checkboxes, the last bus group (which is the last ticked checkbox) will only be true.

---

To fix, you can work with array .includes() to prevent overwriting for the not relevant value.

if (formValue.checkboxes.includes('bus-12')) {
  this.bus1 = true;
  this.bus2 = true;
} else {
  this.bus1 = false;
  this.bus2 = false;
}

if (formValue.checkboxes.includes('bus-34')) {
  this.bus3 = true;
  this.bus4 = true;
} else {
  this.bus3 = false;
  this.bus4 = false;
}

if (formValue.checkboxes.includes('bus-56')) {
  this.bus5 = true;
  this.bus6 = true;
} else {
  this.bus5 = false;
  this.bus6 = false;
}

Sample StackBlitz Demo

CodePudding user response：

I'll have something similar and I do it like this

on the ts I'll add this code

    get formValues() {
    return this.checkboxGroup.value.checkboxes;
  }

so I can get the reference values for the checkbox array. And then on the html I'll do this

<div *ngIf="formValues[0]">Bus1</div>

<div *ngIf="formValues[0]">Bus2</div>

<div *ngIf="formValues[1]">Bus3</div>

<div *ngIf="formValues[1]">Bus4</div>

<div *ngIf="formValues[2]">Bus5</div>

<div *ngIf="formValues[2]">Bus6</div>

But this example works without the submit logic. For the submit logic you can add a flag/ boolean variable like for example submitted and it should go like this

submit() {
this.submitted = true;
}

and only add this to the html

<div *ngIf="formValues[0] && submitted">Bus1</div>

and update it as best works for you

this is the working example https://stackblitz.com/edit/angular-checkbox-custom-value-r4zy3l?file=src/app/app.component.ts