i'm taking angular2 course , following along. doing crud application - model-driven form , using fake api get, post(add), put(update) , delete users.
here code get, add , edit processes. , add processes works fine. (as delete - code came after , works fine too).
the edit process not work , i'm using ngmodel in form. @ network tab , shows not doing put. it's though not recognize form has been changed. validators on form work fine.
i click user in list edit form.
after changing 'name' in edit form , clicking save.
the console tabs:
it shows correct 'user id'. show in user service before api call. here show user object name change. object passed api. show return api call. shows empty object - think is. , every time hit save button, same 3 lines (i put them there debug) repeated. no put shows in network tab. 
the network tabs:
does not show put - expect. shows original get. 
here's user-form.component.ts file.
import {component, oninit} 'angular2/core'; import {controlgroup, validators, formbuilder} 'angular2/common'; import {router, candeactivate, routeparams} 'angular2/router'; import {userservice} './user.service'; import {user} './user'; import {namevalidators} './namevalidators'; import {emailvalidator} './emailvalidator'; import {phonevalidator} './phonevalidator'; @component({ selector: 'user-form', templateurl: 'app/user-form.template.html', styleurls: ['app/styles.css'], providers: [userservice] }) export class userformcomponent implements candeactivate, oninit { form: controlgroup; issaving = false; title: string; user = new user(); constructor(fb: formbuilder, private _router: router, private _userservice: userservice, private _routeparams: routeparams ) { this.form = fb.group ( { name: ['', validators.compose( [validators.required ]), namevalidators.shouldbeunique], email: ['', validators.compose( [validators.required, emailvalidator.email ])], phone: ['', validators.compose( [validators.required, phonevalidator.phone ])], address: fb.group ( { street: ['', validators.required], suite: [''], city: ['', validators.required], zipcode: ['', validators.required] } ) } ) } ngoninit() { var id = this._routeparams.get("id"); this.title = id ? "edit user" : "add user"; if (!id) { // 'add user' form exit. return; } else { // 'edit user' form. this._userservice.getuser(id) .subscribe(user => this.user = user, // check see if user found on database. response => { if (response.status == 404) { this._router.navigate(['notfound']); } }); } } save() { var result; if (this.form.valid) { this.issaving = true; if (this.user.id) { // testing: console.log("before call sent - id: " + this.user.id); result = this._userservice.updateuser(this.user); // testing: console.log("after call returned back: " + json.stringify(result)); } else { result = this._userservice.adduser(this.user); result.subscribe(x => { this._router.navigate(['users']); }); } } else { this.form.seterrors( { // setting key , value. invalidsave: true }); } } routercandeactivate(next, previous) { if (this.form.dirty && !this.issaving) { return confirm("a user being processed not yet saved. sure want continue?"); } else { return true; } } } here's user-service.ts file.
import {injectable} 'angular2/core'; import {http} 'angular2/http'; import {observable} 'rxjs/observable'; import 'rxjs/add/operator/map'; @injectable() export class userservice { private _url = "http://jsonplaceholder.typicode.com/users"; constructor(private _http: http) { } getusers() { return this._http.get(this._url) .map(res => res.json()); } getuser(userid) { return this._http.get(this.getuserurl(userid)) .map(res => res.json()); } adduser(user) { return this._http.post(this._url, json.stringify(user)) .map(res => res.json()); } updateuser(user) { // testing: console.log("in service - before calling api: " + json.stringify(user)); return this._http.put(this.getuserurl(user.id), json.stringify(user)) .map(res => res.json()); } private getuserurl(userid) { return this._url + "/" + userid; } }
here's user-form-template.html file.
<h1>{{ title }}</h1> <div class="row formpage"> <div class="col-md-6 col-lg-6 well"> <form [ngformmodel]="form" (ngsubmit)="save()"> <fieldset> <legend> user </legend> <div class="form-group"> <label for="name">name</label> <input [(ngmodel)]="user.name" ngcontrol="name" id="name" class="form-control" type="text" #localvarname="ngform"> <div *ngif="localvarname.control.pending">checking uniqueness...</div> <div *ngif="localvarname.touched && localvarname.errors"> <div class="alert alert-danger name" *ngif="localvarname.errors.required"> name required. </div> <div class="alert alert-danger name" *ngif="localvarname.errors.shouldbeunique"> name taken. </div> <div class="alert alert-danger name" *ngif="localvarname.errors.invalidsave"> name invalid. </div> </div> </div> <div class="form-group"> <label for="email">email</label> <input [(ngmodel)]="user.email" ngcontrol="email" id="email" class="form-control" type="text" #localvaremail="ngform" > <div *ngif="localvaremail.touched && localvaremail.errors"> <div class="alert alert-danger email" *ngif="localvaremail.errors.required"> email required. </div> <div class="alert alert-danger email" *ngif="localvaremail.errors.emailinvalid"> email not valid </div> <div class="alert alert-danger email" *ngif="localvaremail.errors.invalidsave"> email invalid. </div> </div> </div> <div class="form-group"> <label for="phone">phone</label> <input [(ngmodel)]="user.phone" ngcontrol="phone" id="phone" class="form-control" type="text" #localvarphone="ngform" > <div *ngif="localvarphone.touched && localvarphone.errors"> <div class="alert alert-danger phone" *ngif="localvarphone.errors.required"> phone required. </div> <div class="alert alert-danger phone" *ngif="localvarphone.errors.phoneinvalid"> phone not valid </div> <div class="alert alert-danger phone" *ngif="localvarphone.errors.invalidsave"> phone invalid. </div> </div> </div> </fieldset> <fieldset ngcontrolgroup="address"> <legend> address </legend> <div> <div class="form-group"> <label for="street">street</label> <input [(ngmodel)]="user.address.street" ngcontrol="street" id="street" class="form-control" type="text" #localvarstreet="ngform" > <div class="alert alert-danger street" *ngif="localvarstreet.touched && !localvarstreet.valid"> street required. </div> </div> <div class="form-group"> <label for="suite">suite</label> <input [(ngmodel)]="user.address.suite" ngcontrol="suite" id="suite" class="form-control" type="text" #localvarsuite="ngform" > <div class="alert alert-danger suite" *ngif="localvarsuite.touched && !localvarsuite.valid"> suite required. </div> </div> <div class="form-group"> <label for="city">city</label> <input [(ngmodel)]="user.address.city" ngcontrol="city" id="city" class="form-control" type="text" #localvarcity="ngform" > <div class="alert alert-danger city" *ngif="localvarcity.touched && !localvarcity.valid"> city required. </div> </div> <div class="form-group"> <label for="zipcode">zip code</label> <input [(ngmodel)]="user.address.zipcode" ngcontrol="zipcode" id="zipcode" class="form-control" type="text" #localvarzipcode="ngform" > <div class="alert alert-danger zipcode" *ngif="localvarzipcode.touched && !localvarzipcode.valid"> zip code required. </div> </div> </div> </fieldset> <button class="btn btn-primary" type="submit" [disabled]="!form.valid">save</button> </form> </div> here's user class - user.ts. used 2-way binding.
export class user { id: number; name: string; phone: string; email: string; // instantiate address class. address = new address(); } export class address { street: string; suite: string; city: string; zipcode: string; }
in user-service.ts file, add headers
private globalheaders: headers = new headers(); globalheaders.append('content-type','application/json') modify below request in http put
.put(this.getuserurl(user.id), json.stringify(user), {headers: this.globalheaders}) you need subscribe update request in user-form.component.ts
this._userservice.updateuser(this.user) .subscribe( response => { console.log(response) }) }) except looking fine.
Comments
Post a Comment