Pre-populate form data from mysql

Hi,

Been at this for days and can’t seem to figure out.

I have retrieved data from database mysql using php with certain id that was passed on a button.
then i use the console log to output the data. works perfectly fine:

datetime:"2017-09-03 09:45:56"
description:="some description here"
info:"some info here"
job_id:"4"
subject:"subject here"
typeofjob:"job1"
user_id:"2"

:heavy_check_mark:

i’m trying to assign the form field value with the designated value. if I do this on .ts file:

content:any={};  
 this.content.subject='123';

and .html file:

<ion-input type="text" [(ngModel)]="content.subject" name="subject" required></ion-input>

the 123 showed up inside the form field.
:heavy_check_mark:

then i tried this on .ts file
this.content.subject=this.formfield.subject
:x:

not working. what am i doing wrong?

What is

and where does it come from?

it’s from this.formfield = this.responseData.feedData; <-- retrieved echo from the php which works just fine. I don’t think i need to copy the php processing part here since the console log returns the correct value.

console.log(this.formfield); <-- returns the data i already typed above.

i assume this.formfield.+subject will return only just the subject data.

It’s probably a common mistake either in the .ts or .html file. It’s also possible that if data field is null or undefined, or an object, you get no output in view.

Please provide some screenshots or the code, so that we have more input to chunk for help.

The key question is whether that console log happens before or after you are attempting to assign to this.content, and I’m going to guess “after”.

console.log(this.formfield.subject) right before saving it into the variable should clear up if the value is actually in there. Don’t assume anything.

getjobFeed()
{
this.commonProvider.presentLoading();
this.authService.postData(this.userPostData, ‘jobidFeed’)
.then((result) => {
this.responseData = result;
if (this.responseData.feedData)
{
this.commonProvider.closeLoading();
this.formfield = this.responseData.feedData;
console.log(this.formfield); <-- this console log is the one that returns the one i typed above. if i turned it off the output wont’ show.
}
else
{
console.log(“No access”);
}
}, (err) => {
console.log(“Connection failed”);
});
}

authservice is my custom auth that calls php.

this.content.subject=this.formfield.subject

The issue seems to be related to the timing of this assignment. Do it inside the then block of getjobFeed(). Incidentally, I don’t like the design of your commonProvider. Even in a best-case scenario, it can’t handle multiple pending operations.

so using presentToast on the ts file itself better?
ok so if I do this:


this.commonProvider.closeLoading();
this.formfield = this.responseData.feedData;
console.log(this.formfield);
console.log(this.formfield.subject);

console log returns:
datetime:"2017-09-03 09:45:56"
description:="some description here"
info:"some info here"
job_id:"4"
subject:"subject here"
typeofjob:"job1"
user_id:“2” <-- onsole.log(this.formfield);
followed by xhr finished loading code
undefined <-- console.log(this.formfield.subject);

hm… ???

These two lines are exactly as you write here? Precisely next to one another, in the same scope and block, with nothing intervening? This seems very difficult to believe.

What does this mean?

xhr is part of chrome developer tools. shows if you click inspect on a page. it will show the output and what pages are loaded etc.

50 PM

Oh, I think I know what is happening. The [(ngModel)] binding is fighting with you. Don’t bind controls to subproperties of objects that you are assigning to. Bind only to direct controller properties, such as “this.formfieldSubject” and assign to those inside getjobFeed(), instead of trying to do it in one swoop.

okie. will try that. i will post the result later