How we can checked some checkboxes from the array In Angular 6

Question

I have a form for editing data.In it there is some checkboxes. I get the previously selected checked box array[] from the DB I want to checked those check boxes as checked in the edit profile form. When we editing the page.

app.component.html file:

<form [formGroup]="editCategoryForm" > 
    <div class="form-group">
        <mat-form-field>
            <input matInput placeholder="Name"  formControlName="name" >
        </mat-form-field>
    </div>
    <div formArrayName="categoryArray" >  
        <fieldset *ngFor="let address of editCategoryForm.controls.categoryArray['controls']; let i = index" >
            <div [formGroupName]="i" >
                <div class="form-group">
                    <mat-form-field>
                        <input matInput placeholder="Label" formControlName ="label"  required>
                    </mat-form-field>
                    <br/>
                    <div class="check-box" *ngFor="let data of measurementData">
                        <input type="checkbox" (change)="onChange(i,data._id,data.name, $event.target.checked)"  > {{data.name}}
                    </div> 
                    <div class="col-sm-1">
                        <button mat-mini-fab color="warn" *ngIf="editCategoryForm.controls.categoryArray['controls'].length > 1" title="Remove Fields" (click)="removeLair(i)">x</button>     
                    </div>

                </div>
            </div>
        </fieldset> 
        <br/>
        <div class="form-group">
            <button mat-raised-button color="accent" (click)="addNew()">Add Measurement</button>
        </div>
        <div class="form-group">
            <button style="float: right;margin: 29px;"  mat-raised-button color="primary" (click)="submitdata()">Submit</button>          
        </div>  
    </div>
</form>

I have this for capturing the array of measurements. that are in the DB:

this.category = {
    "_id":"5c4b0d6918f72032c0569004",
    "name":"categorytest",
    "measurements": [{
        "measurements": [
            {"name":"Chest","id":"5c4ac1c4da2dfe251aeee037"},
            {"name":"Stomach","id":"5c4ac1d6da2dfe251aeee038"},
            {"name":"Hip","id":"5c4ac1dbda2dfe251aeee039"},
            {"name":"Length","id":"5c4ac201da2dfe251aeee03c"}
        ],
        "label":"testfff"
    },
    {
        "measurements":[{"name":"Chest","id":"5c4ac1c4da2dfe251aeee037"}],
        "label":"httt"
    }]
}

app.component.ts File:

this.https.post<any>('api/category/details', data).subscribe(response => {
    this.category = response.category;
    this.editCategoryForm.controls['name'].setValue(this.category.name);
    console.log(this.category);
    console.log(this.category.measurements.length);

    for (let i = 0; i < this.category.measurements.length; i++) {
        if (i !== 0) {
            const control = <FormArray>this.editCategoryForm.controls['categoryArray'];
            control.push(this.getData());
        }
        this.categoryArray.at(i).get('label').setValue(this.category.measurements[i].label);
    }
});

Here is a Stackblitz demo.

Wen W · Accepted Answer · 2019-02-01 13:34:42Z

2

  inputChecked(i,data){
    let checked = false;
    //console.log(this.category.measurements[i].measurements);
    //console.log('data = ', data);
    for (let l = 0; l < this.category.measurements[i].measurements.length; l++){
      let temp = this.category.measurements[i].measurements[l];
      //console.log('inside =',temp);
     if (temp.name == data.name && temp.id == data._id){
       checked = true;    } 
    }
    return checked;
  }

put the above in your ts file, then reference it like so in your html file:

<input type="checkbox" (change)="onChange(i,data._id,data.name, $event.target.checked)"  [checked]="inputChecked(i,data)"> {{data.name}}

answered Feb 1, 2019 at 13:34

Wen W

2,6371 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aakankshi Gupta Over a year ago

hlo sir , can u plz help me again. @Wen Hao Wu stackblitz.com/edit/angular-neny5v?embed=1&file=src/app/… plz check this (problem in submitting the data )

Wen W Over a year ago

it looks like the checked values are not in your this.editCategoryForm.controls.categoryArray.value[i].measurements, you will need to add those to it include to get all of them.

Wen W Over a year ago

you have to also do it at init. Right now, that available is only populated when new checks.

Collectives™ on Stack Overflow

How we can checked some checkboxes from the array In Angular 6

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related