CODEWITHSUNDEEP
angularangular6angular-reactive-forms
Anuj TBE
Anuj TBE

Reputation: 9790

Create Array Input field in Angular 6

I'm using Angular 6.

I have more than 100 items in an array which I have to display in a table. The first element of the table is the checkbox to select the field.

For that checkbox input field I have created a formGroup

exportForm: FormGroup;
processedItems: Array<any> = [];

ngOnInit() {
    this.exportForm = this.formBuilder.group({
      product_index: new FormControl([])
    });
}

and in template

<form [formGroup]="" method="post" (submit)="onSubmit()">
  <table>
    <tr *ngFor="let p of processedItems; let id = index">
      <td>
        {{ id+1 }} <input class="" type="checkbox" formControlName="product_index" title="select" value="{{ id }}">
      </td>
      <td> {{ p.title }}</td>
    </tr>
  </table>
</form>

onSubmit() handler.

onSubmit() {
  console.log(this.exportForm.value);
}

But this only gives one item with false

enter image description here

I want to get value of the selected checkbox.

Upvotes: 1

Views: 1408

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27371

Try this

onSubmit() {
  const selectedOrderValue = this.exportForm.value.product_index
      .map((v, i) => v ? this.processedItems[i].value : null)
      .filter(v => v !== null);
}

Ref This:https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular

Upvotes: 1

Related Questions