question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ion-input type text not working with undefined initial value in FormGroup formControl

See original GitHub issue

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.8
   @angular-devkit/core       : 0.8.1
   @angular-devkit/schematics : 0.8.1
   @angular/cli               : 6.2.1
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.3, (and 14 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/heb/Library/Android/sdk)
   ios-deploy        : 2.0.0
   NodeJS            : v10.10.0 (/usr/local/Cellar/node/10.10.0/bin/node)
   npm               : 6.4.1
   OS                : macOS
   Xcode             : Xcode 10.0 Build version 10L232m```

**Describe the Bug**
When using ion-input type text together with a FormControl where the initial value is empty (or null, undefined) then:
- no placeholder text visible, even though a placeholder attribute is set on the tag
- input itself is not accessible/clickable at all

As soon as at least one value, even just a whitespace is added as initial value everything works fine. Also the placeholder text is displayed properly once the initial whitespace was removed.

**Steps to Reproduce**
Steps to reproduce the behavior:
1. Create a form with an ion-list with an ion-item and an ion-input type text inside
2. in the TS file create a new FormGroup with a form control for that input, set the initial value to undefined (or null)
3. bind the form group to the form and set the formControlName of the input to the key you chose in the FomGroup definition
4. start the app and open it in a browser
5. the input is not accessible
6. Change the initial value to empty string ''
7. reload
8. it is working

**Expected Behavior**
The ion-input should behave the same both for empty string and undefined initial value.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:4
  • Comments:10 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
ptitjescommented, Sep 14, 2018

I confirm that this is fixed in 4.0.0-beta.9. This issue can be closed.

2reactions
ptitjescommented, Sep 10, 2018

@paulstelzer Yep, as stated by @hebra. However, this is important to handle null values as before (that is when the field is not touched then a null value is kept).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Need assistance with Ionic 3 form group, cannot read property ...
1- Cannot read property 'get' of undefined. 2- ERROR Error: Uncaught (in promise): Error: formGroup expects a FormGroup instance. Please pass ...
Read more >
How to get/set an Ionic ion-input FormControl value within a ...
Specifically, I would like to: set a default value in the component instance. verify that the value is set in the related DOM...
Read more >
typeerror: cannot read properties of undefined (reading 'controls ...
TypeError: Cannot read property 'controls' of undefined ... Then you need to create form group and controls, as below. const authForm= new FormGroup...
Read more >
Shadow parts in Ionic | Damir's Corner
ngOnInit(): void { this.form = new FormGroup({ date: new FormControl(undefined, [Validators.required]), text: new FormControl(undefined, ...
Read more >
Ionic Tutorial - Forms and Validations in ionic 5
These are the basic concepts you need to grasp before we start. FormControl : it tracks the value and validity status of an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found