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

**URL:** <https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684>\
**Category:** ionic-v3\
**Created:** [November 20, 2017, 5:34am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684 "2017-11-20T05:34:28Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhl9119](https://avatars.discourse-cdn.com/v4/letter/r/b782af/32.png) [@rhl9119](https://forum.ionicframework.com/u/rhl9119)\
**Post date:** [November 20, 2017, 5:34am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/1 "2017-11-20T05:34:28Z")

</div>

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…!!!

---

<div class="post-metadata">

**Author:** ![narasimham3](https://avatars.discourse-cdn.com/v4/letter/n/d6d6ee/32.png) [@narasimham3](https://forum.ionicframework.com/u/narasimham3)\
**Post date:** [November 20, 2017, 5:46am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/2 "2017-11-20T05:46:41Z")

</div>

use syntax like this

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

---

<div class="post-metadata">

**Author:** ![akr\_rajkumar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/akr_rajkumar/32/116194_2.png) [@akr\_rajkumar](https://forum.ionicframework.com/u/akr_rajkumar)\
**Post date:** [November 20, 2017, 5:48am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/3 "2017-11-20T05:48:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rhl9119](https://avatars.discourse-cdn.com/v4/letter/r/b782af/32.png) [@rhl9119](https://forum.ionicframework.com/u/rhl9119)\
**Post date:** [November 20, 2017, 5:57am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/4 "2017-11-20T05:57:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rhl9119](https://avatars.discourse-cdn.com/v4/letter/r/b782af/32.png) [@rhl9119](https://forum.ionicframework.com/u/rhl9119)\
**Post date:** [November 20, 2017, 5:58am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/5 "2017-11-20T05:58:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rhl9119](https://avatars.discourse-cdn.com/v4/letter/r/b782af/32.png) [@rhl9119](https://forum.ionicframework.com/u/rhl9119)\
**Post date:** [November 20, 2017, 6:05am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/6 "2017-11-20T06:05:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![akr\_rajkumar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/akr_rajkumar/32/116194_2.png) [@akr\_rajkumar](https://forum.ionicframework.com/u/akr_rajkumar)\
**Post date:** [November 20, 2017, 6:47am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/7 "2017-11-20T06:47:10Z")

</div>

Can you please share your input field?

---

<div class="post-metadata">

**Author:** ![rhl9119](https://avatars.discourse-cdn.com/v4/letter/r/b782af/32.png) [@rhl9119](https://forum.ionicframework.com/u/rhl9119)\
**Post date:** [November 20, 2017, 6:53am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/9 "2017-11-20T06:53:11Z")

</div>

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![akr\_rajkumar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/akr_rajkumar/32/116194_2.png) [@akr\_rajkumar](https://forum.ionicframework.com/u/akr_rajkumar)\
**Post date:** [November 20, 2017, 6:59am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/10 "2017-11-20T06:59:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rhl9119](https://avatars.discourse-cdn.com/v4/letter/r/b782af/32.png) [@rhl9119](https://forum.ionicframework.com/u/rhl9119)\
**Post date:** [November 20, 2017, 7:06am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/11 "2017-11-20T07:06:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![akr\_rajkumar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/akr_rajkumar/32/116194_2.png) [@akr\_rajkumar](https://forum.ionicframework.com/u/akr_rajkumar)\
**Post date:** [November 20, 2017, 7:07am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/12 "2017-11-20T07:07:37Z")

</div>

Ok fine. Please share your LoginPage component

---

<div class="post-metadata">

**Author:** ![vks\_gautam1](https://avatars.discourse-cdn.com/v4/letter/v/ed655f/32.png) [@vks\_gautam1](https://forum.ionicframework.com/u/vks_gautam1)\
**Post date:** [November 20, 2017, 7:08am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/13 "2017-11-20T07:08:55Z")

</div>

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

> <https://github.com/ionic-team/ionic/issues/13414#issuecomment-344225460>

---

<div class="post-metadata">

**Author:** ![rhl9119](https://avatars.discourse-cdn.com/v4/letter/r/b782af/32.png) [@rhl9119](https://forum.ionicframework.com/u/rhl9119)\
**Post date:** [November 20, 2017, 10:29am UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/14 "2017-11-20T10:29:06Z")

</div>

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

submit() {  
[this.logger.info](http://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;
    }
  }
);

```

}

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 10:02pm UTC](https://forum.ionicframework.com/t/unable-to-modify-value-which-is-already-filled-in-ion-input-in-ionic-3/112684/15 "2021-07-19T22:02:47Z")

</div>

Closed on July 19, 2021, 10:02pm UTC