Hi,
I am new to Angular but I am trying to create a form and populate it with
data that exists when I do a http get request. The issue I believe is when
the page loads it loops the elements in my JSON and tries to display them
in each input. this is the error I get
EXCEPTION: Expression has changed after it was checked. Previous value:
'Advertising'. Current value: 'Contractors'.
Here is my Model class,
export class BillTypes {
constructor(
public id:string,
public name:string,
public percentage:number,
public outOfScope:boolean,
public active:boolean,
public dateCreate:string,
){}
}
This is my service which I call to get the Json,
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 my json i get back
[
-
{
- 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
}
]
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 html
<section>
<aside>
<h4>Bill Types</h4>
<p>Ensure that your files are named in a way that makes them easy to find
and immediately understand.</p>
</aside>
<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'>
<td class="name">
<div class="input-field">
<input type="text" name="name-{{i}}" placeholder="Name"
[(ngModel)]="billType.name" formControlName="name" />
</div>
</td>
<td class="edit" onclick="deleteBillTypeRow($(this));">
<i class="material-icons">mode_edit</i>
</td>
</tr>
</tbody>
</table>
<aside>
<div class="left-aside">
</div>
<div class="right-aside">
<button type="submit" class="cancel">Cancel</button>
<button type="submit" class="save">Save</button>
</div>
<div class="clearfix"></div>
</aside>
</form>
</section>
If anyone can point me in the right direction it would 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.
