How to filter FormArray Element in Angular 6

Question

I want filter form array by typing text in the textbox will filter data in the formarray and return matching row.

Here's a link Here is the stackblitz link I have tried to achieve. I have thousands of form array element and I want to filter it and select the corresponding value from the dropdown and click on update button will update all records.


@Component({
  selector: 'app-form-array',
  templateUrl: './form-array.component.html',
  styleUrls: ['./form-array.component.css']
})
export class FormArrayComponent implements OnInit {
  form: FormGroup;
  searchText: String = '';
  devices: Array<any> = [];
  datasets: Array<any> = [];
  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      published: true,
      credentials: this.fb.array([]),
    });
  }
  ngOnInit() {
    this.devices = [
    { name: 'device1' },
    { name: 'device2' },
    { name: 'device3' },
    { name: 'device4' },
    { name: 'device5' },
    { name: 'device6' }
  ];
   this.datasets = [
    { name: 'dataset1' },
    { name: 'dataset2' },
    { name: 'dataset3' },
    { name: 'dataset4' },
    { name: 'dataset5' },
    { name: 'dataset6' }
  ];
    this.devices.forEach((device) => {
      this.addCreds();
    });
  }
  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    creds.push(this.fb.group({
      dataset_name: ['', []],
      device_id: ['', []],
    }));
    this.devices.push({ name: 'device'+ (this.devices.length+1) });
  }
submit() {
  console.log(this.form.value.credentials);
}
}

<form [formGroup]="form" *ngIf="form">
    <input type="checkbox" formControlName="published"> Published
      <div *ngIf="form.controls.published.value">

        <h2>Credentials</h2>
        <button (click)="addCreds()">Add</button>
        <button (click)="submit()">submit</button>
        <br><br>
        <input placeholder="search device" [(ngModel)]="searchText" [ngModelOptions]="{standalone: true}">
        <br><br>
        <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value | formArrayFilterPipe: searchText; let i = index">
          <ng-container [formGroupName]="i">
            <table>
              <tbody>
                <tr>
                  <td>
                          {{devices[i]?.name}}
                  </td>
                  <td>
                    <select id="{{datasets[i]?.name + 'choice'}}" formControlName="dataset_name">
                        <option *ngFor="let dataset of datasets">{{dataset?.name}} </option>
                    </select>
                  </td>
                </tr>
              </tbody>
            </table>
          </ng-container>
        </div>

      </div>
    </form>```

If I check this {{form.controls.credentials?.value | json}} outside <ng-container>. It is showing blank values. — Piyush Jain
– Piyush Jain, Commented Aug 7, 2019 at 11:12
Can you check once now on stackblitz.com/edit/santosh-angular-form-array — Santosh Shinde
– Santosh Shinde, Commented Aug 7, 2019 at 12:18
@DpGp I have already provided solution below. can you please check that ? — Piyush Jain
– Piyush Jain, Commented Oct 10, 2019 at 6:26

Piyush Jain · Accepted Answer · 2019-08-07 12:26:46Z

1

check this

form-array-filter-pipe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'formArrayFilterPipe'
})
export class FormArrayFilterPipe implements PipeTransform {

  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;

    searchText = searchText.toLowerCase();
    return items.filter( it => {
      console.log('abc', it.value.device_id);
      return it.value.device_id.toLowerCase().includes(searchText);
    });
  }

}

output

update this code and check. Let me know in case of any doubt.

answered Aug 7, 2019 at 12:26

Piyush Jain

1,9863 gold badges22 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

How to filter FormArray Element in Angular 6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related