Unable to modify value which is already filled in ion-input in ionic-3


#1

I’m using ionic 3 and angular 2 for app development. In html pages if I enters any value in input box then it is filling correctly but if I clicks any other place on same page and again try to enter something on same input bot that time I’m unable to enter anything over there. Means I’m unable to correct some value which is already filled in ion-input.

Please help…!!!


#2

use syntax like this

<ion-input type="text" value=""></ion-input>


#3
    <ion-label stacked style="color:#ED3A5A; font-size:15px;" >Mobile Number</ion-label>
    <ion-input type="tel"  [(ngModel)]="mobile" value="{{mobile}}" = pattern="/^[0-9]*$/" maxlength="10" required>

I’m using the above code. Initially it will show me the ngModel value which is already in the component. Later, if you modify the data means it will automatically changed


#4

Thanks for reply.
I’m using same syntax whatever you’ve written. I’m not getting any problem to fill data, my problem is suppose I’m filling registration form and in that that I’ve filled firstname, lastname and some other value, but if I want to modify firstname or lastname value again that time I’m unable to do that. Pointer or cursor in not appearing in that input box.


#5

Thanks for reply.
I’m using same syntax whatever you’ve written. I’m not getting any problem to fill data, my problem is suppose I’m filling registration form and in that that I’ve filled firstname, lastname and some other value, but if I want to modify firstname or lastname value again that time I’m unable to do that. Pointer or cursor in not appearing in that input box.


#6

I’m using (ngSubmit), because I want to fill all data of that form with validation.
I guess in ngModel I can’t use validations.


#7

Can you please share your input field?


#9
<form [formGroup]="myForm" (ngSubmit)="submit()">
        <ion-item>
            <ion-label primary floating>Email/Mobile</ion-label>
            <ion-input type="text" id="username" class="form-control" formControlName="username"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label primary floating>Password</ion-label>
            <ion-input type="password" id="password" class="form-control" formControlName="password"></ion-input>
        </ion-item>
        <p>{{loginMsg}}</p>
        <div padding>
        </div>
        <button ion-button full round color="light" type="submit" [disabled]="!myForm.valid"><b>LOGIN</b>
        </button>
        <br>
    </form>

#10

I can’t understand what data you want to print in that p tag, i.e., {{loginMsg}}.
What you want to do in the submit button? What data will initially in that p tag.

Please share your expectation in detail


#11

In {{loginMsg}} I’m printing whether login data is correct or not. For login I enters login data as userId and password, If userId or password is wrong and I want to change those that time I’m unable to enter anything in input boxes. Means cursor is not appearing in input box.


#12

Ok fine. Please share your LoginPage component


#13

follow this issue. if find solution given in it. please share it with us


#14

this.myForm = formBuilder.group({
username: ["", Validators.required],
password: ["", Validators.required]
});
}

submit() {
this.logger.info(“invoking submit”);
this.logger.debug(“myform” + this.myForm);
this.loginId = this.myForm.value.username;
this.passwd = this.myForm.value.password;
this.logger.debug("loginId " + this.loginId);
this.logger.debug("passwd " + this.passwd);
this.loginMsg = “Validating User <” + this.loginId + “>. Please wait…”;

this.user.validateUser(
  this.loginId,
  this.passwd,
  this.deviceToken,
  (result, data) => {
    if (result == "1") {
      var _dataObj = JSON.parse(data);
      this.logger.info("log in data object" + JSON.stringify(_dataObj));
      this.loginMsg = _dataObj.message;
      this.storage.set("loginId", this.myForm.value.username);
      this.storage.set("passwd", this.myForm.value.password);
      this.rest.setAuthToken(_dataObj.userId, _dataObj.authToken);
      this.navCtrl.setRoot(HomePage, {});
    } else {
      this.loginMsg = data;
    }
  }
);

}