how to implement angular table with reactive form

Question

based on my html below , as you can see I have a table and then looped through mat cell using *matCellDef="let model" , inside the cell there are input fields which are reactive forms (it has mat error checking ,formcontrolname etc).

Each cell or row should have its own reactive form since each row has its own mat form fields input fields and validations.

How do we address this in angular?. I have provided some code snippets below that might help. highly appreciated. Thanks.

#html code

<mat-table [dataSource]="table.dataSource" [@animateStagger]="{value:'50'}" matMultiSort
    (matSortChange)="table.onSortEvent()">
    <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef mat-multi-sort-header="id">
            <span class="text-left">COLUMN 1</span>
        </mat-header-cell>
        <mat-cell *matCellDef="let model" class="p-2">
            <form [formGroup]="modelForm">
                <div fxLayout="row" class="inspection-schedule-property-border-bottom" style="width: 99%;">
                    <div fxFlex="40" class="inspection-schedule-property-header-sub-label">
                        <mat-form-field appearance="fill" style="padding-right: 8px;" fxFlex="40">
                            <mat-label>
                                enter date
                            </mat-label>
                            <mat-date-range-input>
                                <input matStartDate placeholder="start date" required formControlName="start">
                                <input matEndDate placeholder="end date" required formControlName="end">
                            </mat-date-range-input>
                            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                            <mat-date-range-picker #picker></mat-date-range-picker>
                            <mat-error *ngIf="modelForm.controls.start.hasError('required')">Start date is
                                required</mat-error>
                            <mat-error *ngIf="modelForm.controls.end.hasError('required')">End date is
                                required</mat-error>
                        </mat-form-field>
            </form>

        </mat-cell>
    </ng-container>
</mat-table>

#ts code

modelForm: FormGroup;

 this.modelForm = this._createModelForm();

      private createModelForm(): FormGroup {
        return this.formBuilder.group({
           start: new FormControl(Validators.required),
           end: new FormControl(Validators.required),
        });
      }

#code that pulls data from api to be populated on table

 ngOnInit(): void {

    this.table.dataSource = new MatMultiSortTableDataSource(this.sort, this.CLIENT_SIDE);
    this.table.nextObservable.subscribe(() => { this.getDetails();});
    this.table.sortObservable.subscribe(() => { this.getDetails();});
    this.table.previousObservable.subscribe(() => {this.getDetails();});
    this.table.sizeObservable.subscribe(() => {this.getDetails();});
  }


  private getDetails() {    
    this.isLoading = true;
    this.service
    .getDetails(this.filterModel)
    .pipe(finalize(() => (this.isLoading = false)))
    .subscribe({
      next: (res) => { 
        this.table.data = res.items as Array<any>;
        this.table.totalElements = res.totalItemCount;   
      },
      error: (err) => {
        
      },
      complete: noop,
    });
  }

Eliseo · Accepted Answer · 2022-07-07 18:48:55Z

We have a ngx-multi-sort-table. The tecnica is similar

If we see in github the source

We see that we can override the function "_sortData" that belong to the class "MatMultiSortTableDataSource", so we can do some like this in initData

  initData() {
    this.table.dataSource = new MatMultiSortTableDataSource(this.sort, this.CLIENT_SIDE);
    this.table.dataSource._sortData=(d1: AbstractControl, d2: AbstractControl, params: string[], dirs: string[]): number =>{
      if (d1.value[params[0]] > d2.value[params[0]]) {
          return dirs[0] === 'asc' ? 1 : -1;
      } else if (d1.value[params[0]] < d2.value[params[0]]) {
          return dirs[0] === 'asc' ? -1 : 1;
      } else {
          if (params.length > 1) {
              params = params.slice(1, params.length);
              dirs = dirs.slice(1, dirs.length);
              return this.table.dataSource._sortData(d1, d2, params, dirs);
          } else {
              return 0;
          }
      }
    }
    ....
  }

And when create the data we use some like

  this.table.data = res.users.map(x=>this.createGroup(x));

Another option is create a class that extends from "MatMultiSortTableDataSource"

export class MatMultiSortTableDataSourceControls<T> extends MatMultiSortTableDataSource<T> {
  constructor(sort: MatMultiSort, clientSideSorting = false) {
    super(sort,clientSideSorting);
  }
  _sortData=(dd1: T, dd2: T, params: string[], dirs: string[]): number =>{
    const d1=dd1 as any
    const d2=dd2 as any
    if (d1.value[params[0]] > d2.value[params[0]]) {
        return dirs[0] === 'asc' ? 1 : -1;
    } else if (d1.value[params[0]] < d2.value[params[0]]) {
        return dirs[0] === 'asc' ? -1 : 1;
    } else {
        if (params.length > 1) {
            params = params.slice(1, params.length);
            dirs = dirs.slice(1, dirs.length);
            return this._sortData(d1, d2, params, dirs);
        } else {
            return 0;
        }
    }
  }
}

And use

this.table.dataSource=new MatMultiSortTableDataSourceControls(this.sort,this.CLIENT_SIDE)

See a stackblitz

Eliseo · Accepted Answer · 2022-07-07 08:04:02Z

1

In general in a mat-data-table with sort we create a dataSource like

this.dataSource=new MatTableDataSource(..An array...)

Typical the array is an array of object, but we can use an array of formGroups but in this case we need override the sortData function.

We can choose to have an array of formGroups or a FormArray (and use as ..array.. the formArray.controls. So imagine some like (with the typical ELEMENT_DATA)

//we define
dataSource:MatTableDataSource<AbstractControl>=
          new MatTableDataSource<AbstractControl>()
formArray=new FormArray([]) //<--if use a formArray
arrayOfGroup:FormGroup[]=[] //<--if use an array of FormGroups

ngAfterViewInit()
{
    this.formArray=new FormArray(ELEMENT_DATA.map(x=>this.getFormGroup(x)))
    this.dataSource=new MatTableDataSource(this.formArray.controls)

    //or
    //this.arrayOfGroup=ELEMENT_DATA.map(x=>this.getFormGroup(x))
    //this.dataSource=new MatTableDataSource(this.arrayOfGroup)

    this.dataSource.sort = this.sort;
    this.dataSource.sortData = (data: AbstractControl[], sort: MatSort) => {
      const factor=sort.direction=='asc'?1:sort.direction=='desc'?-1:0
      const column=sort.active?sort.active:'position'
      return data.sort((a: AbstractControl, b: AbstractControl) => {

        //if is number
        if (column=="position" || column=="weight")
          return factor*(+a.value[column]>+b.value[column]?1:
                         +a.value[column]<+b.value[column]?-1:
                         0)
          
        return factor*(a.value[column]>b.value[column]?1:
                         a.value[column]<b.value[column]?-1:
                         0)
      });
     }
}

getFormGroup(data:PeriodicElement)
{
    return new FormGroup({
      position:new FormControl(data.position),
      name:new FormControl(data.name),
      weight:new FormControl(data.weight),
      symbol:new FormControl(data.symbol)
   })
}

Now our cells can be like (e.g. with position)

<ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef 
        mat-sort-header sortActionDescription="Sort by number">
      No.
    </th>
    <td mat-cell *matCellDef="let element"> 
       <input [formControl]="element.get('position')">
    </td>
  </ng-container>

see stackbliz

NOTE: In strict mode I feel we need an auxiliar function

  getFormControl(element:AbstractControl,column:string)
  {
    return (element as FormGroup).get(column) as FormControl
  }

And use

  <input [formControl]="getFormControl(element,'position')">

edited Jul 7, 2022 at 8:04

answered Jul 7, 2022 at 7:48

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

3 Comments

Diya Agastya Over a year ago

Hi Sir @eliseo , I find your example a bit complicated Sir , do you mind a simple example like just based on this snippet stackblitz.com/edit/… ?

Eliseo Over a year ago

@DiyaAgastya, sorry, I answer about mat-table, not about ngx-mat-multi-sort :(, I'm now in hurry (I don't know when I can response -sure the idea is that the datasource was a datasource of FormGroups, so you should do this.table.data = res.items.map(x=>this.getFormGroup(x))

Eliseo Over a year ago

@DiyaAgastya, using a ngx-mat-multi-sort to mannage an array of FormGroups need "override" the function _sortData. You can override in the component or create a new class that extends from MatMultiSortTableDataSource<T>. I add a new answer to show it

Collectives™ on Stack Overflow

how to implement angular table with reactive form

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related