Ngmodel not working

[Rakhee Menon]

Hi Everyone,

I have tried with a simple table which is editable.At first I have added values in the text-box  however when I add values in a text-box dynamically and hit on Add button ie when I add a new row all the values in the previous text-box(rows) turn blank and I also get an Error saying ExpressionChangeAfterItHasBeenCheckedError.

Please check my below code and also my attachment

       HTML Code

<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let personalDetail of personalDetails "> 
<td>
<input type="checkbox" ng-model="personalDetail.selected"/>
</td>
<td >
<input type="text" 
class="form-control" 
formControlName="fname"
[(ngModel)]="personalDetail.fname" required/></td>
</tr>

               TS file

export class TestComponent implements OnInit {
fname: string
lname: string
email: string
form: FormGroup
public personalDetails: any[]= [
{
'fname':'John',

},
{
'fname':'Roy',
}

];

constructor(fb: FormBuilder,) {
this.form = fb.group({
fname: [''],
})
}

ngOnInit() {
}

addNew(){
console.log('rohit')
console.log(this.personalDetails)
let len = this.personalDetails.length
this.personalDetails.push({ 
'fname': "", 
});

Please could anyone tell me which part of the code should I rectify.

Thanks & Regards ,

Rakhee

[Sander Elias]

Hi Rakhee,

You are running into trouble because you are mixing up reactive and template driven forms. Stick with one. 

What happens is that you define a single formgroup, and you are trying to reuse this for every 'line' in your form. But as it's only a single instance, you keep on overwriting the previous one, while the ngFor add's the members. That is causing the ExpressionChangeAfterItHasBeenCheckedError. 

Regards

Sander

[Rakhee Menon]

Hey Thanks Sander!! Could you give me some suggestions for creating table where I can edit the values & it gets reflected only its row ,add a row and also delete the  row

Regards

Rakhee

[Rakhee Menon]

And Can we Add ng-model to a td tag???

Regards

Rakhee

[Sander Elias]

Yes, but it won't do much.

[Rakhee Menon]

Yeah,I tried adding it in my form and I get this error.Please check  my attachment.

If this would not work ,then could you give me another alternative for it and also any idea for creating an editable table with add&del rows and also editing of the textbox in a row.

Regards,

Rakhee