Passing Value of an Input type text to the home.ts

I have difficulty passing the value of an input text from home.html to home.ts My code as below. The value of username does not pass to the home.ts , so I can use it in the function, can anyone say what i am doing wrong please. Thanks

home.html

Username
    <button round block (click)="submit()">Submit to server</button>
</ion-list> 

home.ts
import { Component} from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Http } from ‘@angular/http’; //https://stackoverflow.com/questions/43609853/angular-4-and-ionic-3-no-provider-for-http

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})

export class HomePage {

data: any = {};

constructor(public navCtrl: NavController, public http: Http) {
this.data.username = ‘’;
this.data.response = ‘’;

this.http = http;
}

submit() {
var link = ‘http://bidsmove.com/test/phoneapp/api/api.php’;
var data = JSON.stringify({username: this.data.username});

this.http.post(link, data)
.subscribe(data => {
this.data.response = data["_body"]; //https://stackoverflow.com/questions/39574305/property-body-does-not-exist-on-type-response
}, error => {
console.log(“Oooops!”);
});
}
}

where is the html for the username field? does it use [(ngModel)]=“data.username”?

<input type=“text” name=“username” [(ngModel)]=“data.username”>

just for testing the ngModel, if you set the field to something non-blank at constructor time, does that show in the form?

constructor(public navCtrl: NavController, public http: Http) {
this.data.username = 'foo';

yes I have tested the way you suggested, And it does show the username , but it does not work if i leave this.data.username =’ '; blank and try to use the username from the input field from home.html

yes I have tested the way you suggested, And it does show the username , but it does not work if i leave this.data.username =’ '; blank and try to use the username from the input field from home.html

but, if you set it to ‘foo’ and then overtype the name, the field is updated when your button click handler fires?

no if I set it to ‘foo’ and over type it in input field, and click the submit button it will just show ‘foo’ and will not be updated.

no if I set it to ‘foo’ and over type it in input field, and click the submit button it will just show ‘foo’ and will not be updated.

ok, i think the syntax you used is not as shown…

i think u have [ngModel]

from here is a great explanation

https://forum.ionicframework.com/t/ngmodel-not-working-ionic-2/88551/9

Box binding flows from controller to view:

<button [disabled]="!form.valid">

Banana binding flows from view to controller:

<button (click)="frobulate()">

Banana-in-a-box binding goes both ways:

<input [(ngModel)]="fruit">

It is actually syntactic sugar for:

<input [ngModel]="fruit" (ngModelChange)="fruitChanged($event)">

…where Angular creates the change handler for you that updates this.fruit in the controller.
 So when you want to enable two-way binding in custom components, you need a corresponding 
@Output() fooChange: EventEmitter for every @Input() foo.

thanks for reply i have read all forum links that you have provided, it confirm that my code is correct. But I dont understand why is not working.

Hello,

maybe you should define your variable like

data: any = {};
username:string='';

and set it to your object as variable.

By the way. In ts i personnaly think it is a not a good idea to use same variable name and var, maybe it is mostly better to use let. Should not the problem here, but can easly get a hard to debug problem.

Best regards, anna-liebt

Thanks for reply , I have tried for 3 days for this script to work , with no luck , it should be a simple solution but i cant work it out. do you know of any links to a working example that input value is passed to a function in home.ts . I Feel i am going to give up Ionic all together.

hello,

have you tried to bind your html to a expliced declared variable? Please try it and give reply.
So in .ts as show above and in html change it too.

Best regards, anna-liebt

Hi Anna I am kind of new to Ionic i am not sure what you mean by expliced declare variable , if you mean the could you supplied above , yes I used that it did not work. i also changed this.data.username to let.data.username it will give error. I know the script works because when I enter any text in
this.data.username = ‘’; say for example this.data.username =‘any text’; the script works, but if i input text in input field in home.html, the value is not passed to username in home.ts

If you have a simple code of one input text field in home.html, that passes value to home.ts function that can be outputted to console.log , I will appreciated . Thanks

Hello,

try

export class HomePage {

data: any = {};
username:string='not updated';

constructor(public navCtrl: NavController, public http: Http) {
//this.data.username = ‘’;
this.data.response = ‘’;

this.http = http;
}

submit() {
console.log('username: ' + this.username);
//var link = ‘http://bidsmove.com/test/phoneapp/api/api.php’;
let link = ‘http://bidsmove.com/test/phoneapp/api/api.php’;
//var data = JSON.stringify({username: this.data.username});
let data = JSON.stringify({username: this.username});

var or let should not the problem here, but it cause problems for people coming from other language because in most language variables are scope based and var is function based. So use, if var is not nessecary, let for declarations.

Best regards, anna-liebt

edit: in html

<input type=“text” name=“username” [(ngModel)]=“username”>

hello,

maybe this helps https://stackblitz.com/edit/ionic-mvjznf

Look to homepage.

Best regards anna-liebt

Hi Anna, I tried your code
export class HomePage {

data: any = {};
username:string=‘not updated’;
constructor(public navCtrl: NavController, public http: Http) {

//this.username= ‘’;
this.data.response = ‘’;
this.http = http;
}
submit() {
let data = JSON.stringify({username: this.username});
console.log('username: ’ + this.username);

}
}
and edited home.html
<input type=“text” name=“username” [(ngModel)]=“username” >
when i run it I get output at console this massage username: not updated

Hello,

look to https://stackblitz.com/edit/ionic-mvjznf

Bset regards, anna-liebt