up vote
0
down vote
favorite
Hi I am getting the following error on my form
EXCEPTION: Expression has changed after it was checked. Previous value:
'Advertising'. Current value: 'Contractors'.
here is my html form
<form [formGroup]='billTypesForm' (ngSubmit)=
"submitForm(billTypesForm.value)">
<table>
<thead>
<tr>
<th>name</th>
<th>percentage</th>
<th>out of scope</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let billType of billTypes; let i = index'>
<input type="hidden" name="id" [(ngModel)]="billType.id" [
formControl]="billTypesForm.controls['id']" />
<td class="name">
<div class="input-field">
<input type="text" name="name" placeholder="Name" [(ngModel)]=
"billType.name" [formControl]="billTypesForm.controls['name']" />
</div>
</td>
<td class="percentage">
<div class="input-field">
<input type="text" name="percentage" [(ngModel)]=
"billType.percentage" readonly placeholder="Tax" [formControl]=
"billTypesForm.controls['percentage']" />
</div>
</td>
<td class="outOfScope">
<input type="checkbox" name="outOfScope" [(ngModel)]=
"billType.outOfScope" [formControl]="billTypesForm.controls['outOfScope']"
/>
</td>
<input type="hidden" name="active" [(ngModel)]="billType.active" [
formControl]="billTypesForm.controls['active']" />
<td class="edit" onclick="deleteBillTypeRow($(this));">
<i class="material-icons">mode_edit</i>
</td>
</tr>
</tbody>
</table>
</form>
The problem seems to be around [(ngModel)]="billType.name" in the input
text boxes
here is my component
import {Component, OnInit, AfterViewInit, Input} from '@angular/core';
import {FormBuilder, FormGroup, FormControl, FormArray} from '@angular/forms'
import {BillTypesDataService} from './bill-types-data.service'
import {BillTypes} from "./bill-types";
@Component({
selector: 'brightbook-bill-types',
templateUrl: './bill-types.component.html',
styleUrls: ['./bill-types.component.css'],
})
export class BillTypesComponent implements OnInit {
billTypesForm : FormGroup;
public billTypes: BillTypes;
constructor(private billTypesService: BillTypesDataService, fb: FormBuilder) {
this.billTypesForm = new FormGroup({
id:new FormControl(''),
name: new FormControl(''),
percentage: new FormControl(''),
outOfScope:new FormControl(''),
active: new FormControl('')
});
}
ngOnInit() {
}
ngAfterViewInit() {
this.billTypesService.getBillTypes()
.subscribe(
(res:BillTypes) => this.billTypes = res,
error => console.log( <any>error)
);
}
submitForm(form: any): void{
console.log('Form Data: ');
console.log(form);
}
}
and here is my service
import { Injectable } from '@angular/core';
import {Http, Response, Request, RequestMethod} from '@angular/http';
import {BillTypes} from './bill-types'
import {Observable} from "rxjs";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class BillTypesDataService {
private billTypesUrl = '/settings/bill-types/json';
billTypes: BillTypes[] = [];
constructor(public http: Http) {
}
getBillTypes() {
return this.http.get(this.billTypesUrl)
.map(res => <BillTypes[]> res.json())
.catch(this.handleError);
}
private handleError (error: Response) {
return Observable.throw('Internal server error');
}
}
this is the json I am getting back from the end point call
[
{
"id": null,
"name": "Advertising",
"percentage": 0.5,
"outOfScope": false,
"active": true,
"created": null
},
{
"id": null,
"name": "Car & Truck Expenses",
"percentage": 1,
"outOfScope": false,
"active": true,
"created": null
},
{
"id": null,
"name": "Contractors",
"percentage": 0,
"outOfScope": false,
"active": true,
"created": null
}
]
I have a model class that looks like this
export class BillTypes {
constructor(
public id:string,
public name:string,
public percentage:number,
public outOfScope:boolean,
public active:boolean,
public dateCreate:string,
){}
}
If anyone can help that would be much appreciated thanks in advance.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
