mercredi 1 janvier 2020

Getting error while binding the dynamic table inside form using Angular8

I am getting the following error while trying to bind the dynamic table inside Angular8 formgroup.

Error:

AddComponent.html:170 ERROR Error: Cannot find control with path: 'assignArrays -> allchecked'
    at _throwError (forms.js:2297)
    at setUpControl (forms.js:2205)

I am explaining my code below.

<form [formGroup]="formData" (ngSubmit)="addCouponDetails($event)"  novalidate>

   <mat-form-field appearance="outline">
          <mat-label>Coupon Category</mat-label>
          <select matNativeControl required formControlName="CouponCategory" (change)="getItemsAsPerCategory($event)"  #CouponCategory>
               <option value="">Select Coupon Category</option>
               <option value=Product>Product</option>
               <option value=Store>Store</option>
               <option value=Category>Category</option>
           </select>
    </mat-form-field>
   <ng-container formArrayName="assignArrays" >
          <mat-table #table class="table table-bordered table-sm" [dataSource]="datasource">
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

         <ng-container matColumnDef="check">
             <th mat-header-cell *matHeaderCellDef>
                <mat-checkbox formControlName="allchecked" title="Select All" (click)="selectAll()">
                </mat-checkbox> &nbsp;
             </th>
            <td mat-cell *matCellDef="let element; let index = index" [formGroupName]="index">
                  <mat-checkbox title="select" formControlName="element.checked"></mat-checkbox>
            </td>
     </ng-container>

     <ng-container matColumnDef="Name">
       <th mat-header-cell *matHeaderCellDef> Name </th>
       <td mat-cell *matCellDef="let element; let index = index" [formGroupName]="index"> </td>
     </ng-container>
   </mat-table>
  <div *ngIf="!dataSource || dataSource.data?.length === 0" class="text-center mt-5 text-danger">
        <h6>No records found</h6>
   </div>
   </ng-container>
</form>

Here this is my form. I need the table value will populate as per coupon category selection. I am explaining my .ts file below.

export class Assigns{
    _id: String;
    Name: String;
    allchecked: Boolean = false;
    checked: Boolean = false;
}

export class AddComponent implements OnInit {

     formData:FormGroup;
     table: MatTable<any>;
     displayedColumns: string[] = ['check', 'Name'];
     dataSource = new  MatTableDataSource<Assigns>([]);
     noData = this.dataSource.connect().pipe(map(data => data.length === 0));
     itemData: any = [];

     constructor(private fb: FormBuilder,private as:  ApiService, private router: Router) { }
     ngOnInit() {
        this.createForm();
     }
     createForm(){
      this.formData = this.fb.group({
      CouponCategory: ['', Validators.required],
      assignArrays: this.fb.array([])
     });

   }
   selectAll() {
    this.itemData.forEach(element => {
      element.checked = !element.checked;
    });
    this.dataSource.data = this.itemData;
  }

  getItemsAsPerCategory(event : any) {
    console.log('event', event.CouponCategory);

  }
}

Here My requirement is when user will select any category then the related data will populate inside the table. Here Also checkbox is present with each row and if user will select all cheked option all table row will be selected for submit or user can select individual row. But in this case I am getting the above error which need to be resolved.




Aucun commentaire:

Enregistrer un commentaire