I am trying to implement a toggle on the dynamic table generated when the edit button is clicked in angular 7 application. I am displaying the column row wise that is vertically. I have an edit button and clicking the edit button should allow me to toggle between two tds. One td show readly value while the other td shows the control I am currently getting error No value accessor for form control with unspecified name attribute.Not sure the reason why ?
If you notice in the html below , I have but ngIf for a InvestedAmount field and the button Edit has NgModel bound to EditMode property in the component
Here is my Html
<div>
<input type="checkbox" id= "chk" style="width: 13px; height: 13px;" />
<label for="chk" >Invested</label>
</div>
<div class="card">
<div class="card-header panel-heading" >
<span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Classes</span>
<div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
<label style="text-align: center; vertical-align:middle" class="btn btn-default pull-right" > <i data-bind="visible: true" class="fa fa-plus-square"></i><input
type="checkbox" class="hidden" /> Add Class</label>
</div>
</div>
<div *ngIf="FundClasses && FundClasses.FundDetailsViewModel">
<table class="fundClassesTable table-striped" >
<tr>
<th class="tableItem bold">Fund Name</th>
<th class="tableItem bold">Accounting Class Name</th>
<th class="tableItem bold">Class ID</th>
<th class="tableItem bold">Legal Fund Class</th>
<th class="tableItem bold">Inception Date</th>
<th class="tableItem bold">Invested Amount</th>
<th class="tableItem bold">Vehicle Type</th>
<th class="tableItem bold">Closure Status</th>
<th class="tableItem bold">Is Side Pocket?</th>
<th class="tableItem bold">Is Thematic?</th>
<th class="tableItem bold">Cogency Class?</th>
<th class="tableItem"></th>
</tr>
<ng-container *ngFor="let fundClass of FundClasses.FundDetailsViewModel" >
<tr *ngFor="let f of fundClass['FundClassDetailsViewModel'] | keyvalue">
<td class="tableItem">{{ f.value.FundName}}</td>
<td class="tableItem">{{ f.value.Description}}</td>
<td class="tableItem">{{f.value.Id}}</td>
<td class="tableItem"> <!--{{ f.value.LegalFundClassId}} -->
<kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.LegalFundClassId" class="form-control form-control-sm"
[data]= "fundClass.PrimaryLegalFundClasses" [filterable]="false" textField="Description" [valuePrimitive]="true" valueField="Id"
></kendo-dropdownlist>
</td>
<td class="tableItem"> <!-- {{f.value.InceptionDate}} -->
<kendo-datepicker style="width:100%" [format]="'MMMM yyyy'" [topView]="'decade'" [bottomView]="'year'"
[(ngModel)]="f.value.InceptionDate"
class="form-control form-control-sm" >
</kendo-datepicker>
</td>
<td *ngIf="EditMode" class="tableItem" style="width:100%"> <!--{{ f.value.InvestedAmount}} -->
<input kendoTextBox [(ngModel)]="f.value.InvestedAmount" style=""/>
</td>
<td *ngIf="!EditMode" class="tableItem" style="width:100%">
{{ f.value.InvestedAmount}}
</td>
<td class="tableItem"> <!--{{ f.value.VehicleTypeId}}-->
<kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.VehicleTypeId" class="form-control form-control-sm"
[data]= "FundClasses.VehicleTypes" [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id"
></kendo-dropdownlist>
</td>
<td class="tableItem"> <!-- {{f.value.ClosureStatusId}} -->
<kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.ClosureStatusId" class="form-control form-control-sm"
[data]= "FundClasses.ClosureStatuses" [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id"
></kendo-dropdownlist>
</td>
<td class="tableItem"> <!-- {{f.value.IsSidePocket}} -->
<input type="checkbox" value="{{f.value.IsSidePocket}}" id= "chk" style="width: 13px; height: 13px;" />
<label for="chk" >Yes</label>
</td>
<td class="tableItem"> <!--{{ f.value.IsThematic}} -->
<input type="checkbox" value="{{f.value.IsThematic}}" style="width: 13px; height: 13px;" />
<label for="chk" >Yes</label>
</td>
<td class="tableItem"> <!-- {{f.value.CogencyClassId}} -->
<kendo-dropdownlist style="width:100%" [(ngModel)]= "f.value.CogencyClassId" class="form-control form-control-sm"
[data]= "fundClass.CogencyClasses" [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id"
></kendo-dropdownlist>
</td>
<td class="tableItem">
<button type="button" [(ngModel)]="EditMode" class="btn btn-primary btn mr-1 col-sm-4"
>Edit</button>
<button type="button" class="btn btn-primary col-sm-4"
>Save</button>
<!-- <span ><button type="button" class="btn btn-primary btn-view-all btn mr-1 col-sm-2"
>Edit</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all col-sm-2"
>Save</button>
</span> -->
</td>
</tr>
</ng-container>
</table>
</div>
</div>
Component code
import {Component, OnInit, Input} from '@angular/core';
@Component({
selector : 'mgr-fund-classes',
templateUrl : './fundClasses.component.html'
})
export class FundClassesComponent implements OnInit {
//@Input() FundClasses;
private _fundClasses : any;
public fundClassKeys = [];
_editModel: boolean;
get EditMode(): boolean {
return this._editModel;
}
@Input('EditMode')
set EditMode(value: boolean) {
this._editModel = value;
}
public get FundClasses(): any {
return this._fundClasses;
}
@Input()
public set FundClasses(value: any) {
this._fundClasses = value;
}
ngOnInit() {
this.init();
}
init() {
// if(this.FundClasses) {
// this.fundClassKeys = Object.keys(this.FundClasses.FundDetailsViewModel.FundClassDetailsViewModel);
// }
}
}
Screenshot
