ion-input type text not working with undefined initial value in FormGroup formControl
See original GitHub issueBug 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:
- Created 5 years ago
- Reactions:4
- Comments:10 (8 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I confirm that this is fixed in
4.0.0-beta.9
. This issue can be closed.@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).