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-datetime displayFormat="MM"> does not bind to FormGroup

See original GitHub issue

Ionic version: (check one with “x”) [X ] 2.x

I’m submitting a … (check one with “x”) [ X] bug report

Current behavior: datetime does not bind to FormGroup if the format is “MM”.

Expected behavior: Bind data to FormGroup.

Steps to reproduce: Create FormGroup and try to bind datetime with the format “MM”.

Related code: this.cardForm = this.formBuilder.group({ 'name': ['', Validators.required], 'number': ['', Validators.required], 'exp_month': ['', Validators.required], 'exp_year': ['', Validators.required], 'cvc': ['', Validators.required] });

<form [formGroup]="cardForm" (ngSubmit)="requestToken($event)"> <ion-item> <ion-input formControlName="name" placeholder="Card Holder Name" type="text"></ion-input> </ion-item> <ion-item> <ion-input formControlName="number" placeholder="Card Number" size="16" maxlength="16" type="number"></ion-input> </ion-item> <ion-item> <ion-datetime formControlName="exp_month" displayFormat="MM" pickerFormat="MM"></ion-datetime> </ion-item> <ion-item> <ion-datetime formControlName="exp_year" displayFormat="YYYY" max="2050-10-31"></ion-datetime> </ion-item> <ion-item> <ion-input formControlName="cvc" placeholder="cvc" maxlength="3" size="3" type="number"></ion-input> </ion-item> <button block ion-button type="submit">Create</button> </form>

The output when I console.log(this.cardForm.value): screen shot 2016-12-01 at 12 43 47

The MM does not appear in exp_month whereas the YYYY appears in exp_year

Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.3 Ionic CLI Version: 2.1.12 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.43 ios-deploy version: 1.9.0 ios-sim version: 5.0.6 OS: macOS Sierra Node Version: v4.0.0 Xcode version: Xcode 8.1 Build version 8B62




Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
bbcbrenocommented, Feb 20, 2017

Another workaround is use a hour format: displayFormat="hh" (visually is the same than month). And after take a substring like this: month.substring(0,2)

1reaction
leandrozcommented, Feb 20, 2017

A fix for now is to use ionChange grab the event and then: this.form.patchValue({ desbaste: event.minute.value });

Read more comments on GitHub >

github_iconTop Results From Across the Web

<ion-datetime displayFormat="MM"> does not bind to ... - GitHub
Current behavior: datetime does not bind to FormGroup if the format is "MM". Expected behavior: Bind data to FormGroup. Steps to reproduce: Create...
Read more >
ion-datetime does not display initial date - Stack Overflow
Use ngModel for data binding. home.ts export class HomePage { myForm: FormGroup; date; constructor() { this.myForm = new FormGroup({ ...
Read more >
Ionic datepicker for form
Hello, I need add ionic datepicker inside in a ionic form. I have follow this doc for install datepicker but i don't have...
Read more >
ion-datetime mode laptop Code Example - Code Grepper
Property 'of' does not exist on type 'typeof Observable'. ... Can't bind to 'formControl' since it isn't a known property of 'input'. ......
Read more >
ion2-datetime-picker - npm
Like other ionic components, you can use [formControl] to bind your data. import { FormBuilder, FormGroup } from ...
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