How to get the values of default checked checkbox

Question

I was working on a project of multiple checkbox. There, I want the checkboxes to be checked from the start and the value to be in the form(I am using reactive form). The user can unselect the boxes according to their wish and the data will be stored accordingly. This is the stackblitz of the project. There I was able to make the checkbox checked from the beginning, but when I hit the submit button there is no data when I console-logged. I think this is some binding issue,but I couldn't figure out what is exactly the problem. Can someone help? Thanks in advance.

This is code:

<form [formGroup]="form" (ngSubmit)="submit()">
  <div class="form-group">
    <label for="website">Website:</label>
    <div *ngFor="let web of websiteList">
      <label>
        <input
          type="checkbox"
          [value]="web.id"
          (change)="onCheckboxChange($event)"
          [checked]="web.isSelected"
        />
        {{ web.name }}
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

  form: FormGroup;
  websiteList: any = [
    { id: 1, name: 'HDTuto.com', isSelected: true },

    { id: 2, name: 'HDTuto.com', isSelected: true },

    { id: 3, name: 'NiceSnippets.com', isSelected: true },
  ];

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      website: this.fb.array([], [Validators.required]),
    });
  }

  ngOnInit() {}
  onCheckboxChange(e: any) {
    const website: FormArray = this.form.get('website') as FormArray;
    console.log('checking ->', e);

     if (e.target.checked) {
      website.push(new FormControl(e.target.value));
      console.log('website ->', website);
    } else {
      //console.log(e);
      const index = website.controls.findIndex((x) => {
        console.log('x.value ->', x.value);
        console.log('target.value ->', e.target.value);
        x.value === e.target.value;
      });

      website.removeAt(index);
    }
  }
  submit() {
    console.log(this.form.value);
  }

dluk · Accepted Answer · 2022-05-04 14:07:50Z

1

https://stackblitz.com/edit/angular-ivy-qar4ph?file=src/app/app.component.ts Pay attention to changes in template:

Added formArrayName attribute to checkboxes wrapper and formControlName attribute to input element.
Removed change and checked attributes

In the component ts file:

Added initial form array values
Added mapping to submit method
Removed onCheckboxChange method

answered May 4, 2022 at 14:07

dluk

1,0361 gold badge12 silver badges22 bronze badges

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

3 Comments

user18067747 Over a year ago

In this stackblitz I tried to console.log('this list', this.list); and it is returning this list [undefined, undefined, undefined] why is that so? Also, how do I send other data along with the checkbox data to API.(in this case, console.log)

dluk Over a year ago

Since you added a block statement in the map function with the console.log you need to also add return statement to return the mapped value.

user18067747 Over a year ago

I want to make one change here, when none of the checkboxes are selected I want to send a null. The null right now, only sends an empty array. And if I put 'null' instead, in console log it shows three 'null' in an array but I want only one as a string.

Collectives™ on Stack Overflow

How to get the values of default checked checkbox

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