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
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
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.
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.
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.
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
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.
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