ionic 2: add custom input component in a FORM with

Question

In ionic 2 version:

• Cordova CLI: 6.4.0,
• Ionic Framework Version: 2.0.0-rc.0,
• Ionic CLI Version: 2.1.0,
• Ionic App Lib Version: 2.1.0-beta.1,OS:
• Node Version: v6.7.0

With Ionic 2 FORM, the input: <ion-datetime> happens to be slow (see here).

I want to go around it and use the "cordova-plugin-datepicker" instead. I have many question about it to make it work. But I'll start here with the first step I need to achieve: To implement a custom selector that can be use as a <ion-[something for a form input]> tag.

To start with here, we are just going to try to implement the tag <ion-datetime> thru another component.

I've found similar issue here. It tells to import:import {IONIC_DIRECTIVES} from 'ionic-angular'; and to add in the @Component annotation the metadata: directives: [IONIC_DIRECTIVES]. But in Angular 2 documentation the metadata directives does not exist anymore. And I get an error if I try that.

Now my code:

I have a User form page:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NavController, NavParams } from 'ionic-angular';
import { NativeDatePickerTag } from '../../custom-components/native-date-picker/native-date-picker';

@Component({
    selector:'user-form',
    templateUrl: 'user-form.html',
    providers: [Validators]
})
export class UserFormPage {
    private readonly PAGE_TAG:string = "UserFormPage";
    public birthdate:any;
    public userForm:FormGroup;

    constructor(public navCtrl: NavController, public navParams: NavParams, public fb:FormBuilder, public validators:Validators){}

    public updateUserData = () => {
        console.log(this.userForm.value);
    }

    ionViewDidLoad(){
        console.log(this.PAGE_TAG + " ionViewDidLoad() starts");
        this.userForm = this.fb.group({
            birthday: [this.birthdate,Validators.required],
        });
    }
}

In my 'user-form.html' it looks like this:

           <ion-content>
            <form (ngSubmit)="updateUserData()" [formGroup] = "userForm" >
               <ion-item>
                <ion-label stacked>Birthdate</ion-label>
                <native-date-picker [controlName]="birthday"></native-date-picker>
              </ion-item>
              <button ion-button type="submit"  block>Submit</button>
            </form>
        </ion-content>

And my custom component NativeDatePickerTag (again, this a proof of concept not yet implementing the cordova-plugin-datepicker) :

import { Component, Input, ViewChild, ElementRef } from '@angular/core';
import { Platform } from 'ionic-angular';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
    selector: 'native-date-picker',
    template: `
    <ion-datetime  [formControlName]='this._controlName'></ion-datetime>
    `
})
export class NativeDatePickerTag {
    private readonly COMPONENT_TAG = "NativeDatePickerObj";
    public _controlName: FormControl;

    @Input () set controlName(newControl: FormControl){
        this._controlName = newControl;
    }


    constructor(public platform:Platform){
    }

}

If I run the code like that, it tells in the console.log:

formControlName must be used with a parent formGroup directive

I don't understand why it does not take into account the formGroup the selector native-date-picker is embedded in inside 'user-form.html'. So I've tried to pass the formGroup from 'customer-form.html' to correct this error.

In 'user-form.html' I've changed, <native-date-picker [controlName]="birthday"></native-date-picker> with: <native-date-picker [groupName]="userForm" [controlName]="birthday"></native-date-picker>

And in NativeDatePickerTag, I changed the annotation with:

@Component({
    selector: 'native-date-picker',
    template: `<div [formGroup]='this._formGroup'>
    <ion-datetime  [formControlName]='this._controlName'></ion-datetime>
    </div>
    `
})

And I added inside my class NativeDatePickerTag the following: public _formGroup: FormGroup;

    @Input () set groupName(newGroup: FormGroup){
        this._formGroup = newGroup;
    }

Now I get in console.log:

Cannot find control with unspecified name attribute

I really don't understand what I am doing wrong. Could anyone, with experience regarding this topic,give me some directions?

Answer 1

I found a solution, the key was to understand how works ControlValueAccessor interface

I did that by reading thru those link:

• http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html,
• Angular 2 custom form input
• https://github.com/angular/angular/issues/6639

As requested here is the code:

The native-date-picker.ts:

import { Component, Input, Output, ViewChild, ElementRef, forwardRef, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlValueAccessor } from '@angular/forms';

import { FormValidators } from '../../form-validators/form-validators';

import { Platform } from 'ionic-angular';
import { DatePicker } from 'ionic-native';
import { TranslationService } from '../../services/translation/translation';


import moment from 'moment/min/moment-with-locales.min.js';

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => NativeDatePickerTag),
    multi: true
};

declare var datePicker: any;


@Component({
    selector: 'native-date-picker',
    templateUrl: 'native-date-picker.html',
    providers:[CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]

})
export class NativeDatePickerTag implements ControlValueAccessor {

    private readonly COMPONENT_TAG = "NativeDatePickerTag";

    //The internal data model
    public dateValue: any = '';

    public pickerType=null;
    public _labelForNDP:any;
    public displayFormatForIonDateTime:string;
    public ionDateTimeMonthsShort:string;
    public ionDateTimeMonthsLong:string;

    @Input() submitAttempt;
    @Input() control;
    @Input () set labelForNDP(value:any){
      this._labelForNDP = value;
      console.log("labelForNDP : " + value);
    }
    @Output () onChange: EventEmitter<any> = new EventEmitter();

     //Set touched on ionChange
     onTouched(){
            console.log(this.COMPONENT_TAG + " onTouched() starts");
            this.control._touched=true;
     }

    //From ControlValueAccessor interface
    writeValue(value: any) {
        console.log(this.COMPONENT_TAG + " writeValue("+value+") starts");
        if (value !== undefined || value !== null) {
            this.dateValue = (new moment(value)).format('YYYY-MM-DD');
        }
        console.log(this.COMPONENT_TAG + " writeValue("+value+") this.dateValue " + this.dateValue);

    }

    diplayDateAccordingToSettings(date:any){ 
      console.log(this.COMPONENT_TAG + " diplayDateAccordingToSettings("+date+")");
      let dateToBeDisplayed:any;
      if(moment(date,'YYYY-MM-DD').isValid()){
        dateToBeDisplayed = (new moment(date)).locale(this.trans.getCurrentLang()).format(this.displayFormatForIonDateTime);
      console.log(this.COMPONENT_TAG + " diplayDateAccordingToSettings("+date+")" + " GIVES " + dateToBeDisplayed);
      } else {
        dateToBeDisplayed="";
      }
      return dateToBeDisplayed;
    }

    updateDate(event:any) {       
        console.log(this.COMPONENT_TAG + " updateDate() starts");
        console.info(event);
        let newValue = "I'm new value";
        let dateToSetOn = (new moment(event)).format('YYYY-MM-DD');
        console.log(this.COMPONENT_TAG + " updateDate() about to return " + dateToSetOn);
        this.onTouched();
        this.onChange.next(dateToSetOn);
    }


    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        console.log(this.COMPONENT_TAG + " registerOnChange() starts");
        console.info(fn);
        this.onChange.subscribe(fn);
    }

    //From ControlValueAccessor interface
    registerOnTouched(fn: any) { //leave it empty
    }


    // get the element with the # on it
    @ViewChild("nativeDatePicker") nativeDatePicker: ElementRef; 
    @ViewChild("ionDatePicker") ionDatePicker: ElementRef; 

    constructor(public platform:Platform, public trans:TranslationService){
      console.log(this.COMPONENT_TAG + " constructor() starts");
      console.info(this);
      this.displayFormatForIonDateTime = moment.localeData(this.trans.getCurrentLang())._longDateFormat['LL'];
      this.ionDateTimeMonthsShort =  moment.localeData(this.trans.getCurrentLang()).monthsShort();
      this.ionDateTimeMonthsLong =  moment.localeData(this.trans.getCurrentLang()).months();

      this.setFieldWhenPlatformReady();
    }

    private setFieldWhenPlatformReady = () => {
      this.platform.ready().then(() => {
        if(this.platform.is('android')){
          this.pickerType = "android";
        } else if (this.platform.is('ios')) {
          // ios case: NOT DONE YET
        } else if (this.platform.is('core')) {
          this.pickerType = "core";
        }
       }
      );
    }

    public dateInputManagement = () => { 
          console.log(this.COMPONENT_TAG + " dateInputManagement() starts");
          let dateToUseOnOpening = (moment(this.dateValue,'YYYY-MM-DD').isValid())?new Date(moment(this.dateValue,'YYYY-MM-DD')):new Date();

          console.info(dateToUseOnOpening);

          let options = {
              date: dateToUseOnOpening,
              mode: 'date',
              androidTheme: datePicker.ANDROID_THEMES.THEME_HOLO_LIGHT
          };

          DatePicker.show(options).then(
              (date) => {
              let lang = this.trans.getCurrentLang();

               this.writeValue(new moment(date));
               this.updateDate(new moment(date));
          }).catch( (error) => { // Android only
          });
    }

}

And native-date-picker.html:

<ion-item>
    <ion-label stacked>{{_labelForNDP}}</ion-label>

    <ion-datetime #ionDatePicker [displayFormat]="displayFormatForIonDateTime" [monthShortNames]="ionDateTimeMonthsShort" [monthNames]="ionDateTimeMonthsLong" *ngIf="pickerType=='core' || pickerType=='ios'" name="birthday" [ngModel]="dateValue" (ngModelChange)="updateDate($event)" [class.invalid]="!control.valid && (control.touched||submitAttempt)"></ion-datetime>

    <ion-input #nativeDatePicker type="text" disabled=true (click)="dateInputManagement()" *ngIf="pickerType=='android'" name="birthday" [ngModel]="diplayDateAccordingToSettings(dateValue)"  (ngModelChange)="updateDate($event)" [class.invalid]="!control.valid && (control.touched||submitAttempt)"></ion-input>

</ion-item>

And in the HTML template of the component containing a form that calls it, to respect the @input that need to be given to the class NativeDatePicker, it must look like that:

  <native-date-picker [labelForNDP]="LABEL" #nativeDatePickerOnUserPage formControlName="date" [control]="userForm.controls['date']" [submitAttempt]=submitAttempt>
  </native-date-picker>