Create Array Input field in Angular 6

Question

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

I want to get value of the selected checkbox.

Chellappan வ · Accepted Answer · 2018-09-21 04:56:14Z

1

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

answered Sep 21, 2018 at 4:56

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

5 Comments

Anuj TBE Over a year ago

console.log(selectedOrderValue) is giving a blank array with length 0. I'm afraid if I'm doing it correct?. In the reference example there are predefined values and *ngFor is iterating throw those values. I do not have values to set to form instead want multiple input fields with blank value to the size of the processedItems.

Anuj TBE Over a year ago

I saw the example and want exactly same as it is. But I do not have data to create controls.

Chellappan வ Over a year ago

Then how are you populating the check box

Anuj TBE Over a year ago

you can see implementation in the question.

Chellappan வ Over a year ago

why are you using formControl instead of formArray do you have any specific reason?

Collectives™ on Stack Overflow

Create Array Input field in Angular 6

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related