ionic 2: add custom input component in a FORM within a page / Final goal: integrate "cordova-plugin-datepicker" in Ionic 2 Form
<p>In ionic 2 version:</p>

<ul>
<li>Cordova CLI: 6.4.0,</li>
<li>Ionic Framework Version: 2.0.0-rc.0,</li>
<li>Ionic CLI Version: 2.1.0,</li>
<li>Ionic App Lib Version: 2.1.0-beta.1,OS:</li>
<li>Node Version: v6.7.0</li>
</ul>

<p><strong>With Ionic 2 FORM, the input: <code>&lt;ion-datetime&gt;</code> happens to be slow (<a href="https://github.com/driftyco/ionic/issues/8096" rel="nofollow noreferrer">see here</a>)</strong>.</p>

<p>I want to go around it and use the <a href="http://ionicframework.com/docs/v2/native/date-picker/" rel="nofollow noreferrer">"cordova-plugin-datepicker"</a> instead. I have many question about it to make it work. But I'll start here with the first step I need to achieve: <strong>To implement a custom selector that can be use as a <code>&lt;ion-[something for a form input]&gt;</code> tag.</strong></p>

<p><strong>To start with here, we are just going to try to implement the tag <code>&lt;ion-datetime&gt;</code> thru another component</strong>.</p>

<p>I've found similar issue <a href="https://stackoverflow.com/questions/34849428/using-ion-input-inside-custom-component">here</a>. It tells to import:<code>import {IONIC_DIRECTIVES} from 'ionic-angular';
</code> and to add in the <code>@Component</code> annotation the metadata: <code>directives: [IONIC_DIRECTIVES]</code>. But in <a href="https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html" rel="nofollow noreferrer">Angular 2 documentation</a> the metadata <code>directives</code> does not exist anymore. And I get an error if I try that.</p>

<p>Now my code:</p>

<p>I have a User form page:</p>

<pre><code>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 = () =&gt; {
        console.log(this.userForm.value);
    }

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

<p>In my 'user-form.html' it looks like this:</p>

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

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

<pre><code>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: `
    &lt;ion-datetime  [formControlName]='this._controlName'&gt;&lt;/ion-datetime&gt;
    `
})
export class NativeDatePickerTag {
    private readonly COMPONENT_TAG = "NativeDatePickerObj";
    public _controlName: FormControl;

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


    constructor(public platform:Platform){
    }

}
</code></pre>

<p>If I run the code like that, it tells in the console.log:</p>

<blockquote>
  <p>formControlName must be used with a parent formGroup directive</p>
</blockquote>

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

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

<p>And in NativeDatePickerTag, I changed the annotation with:</p>

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

<p>And I added inside my class NativeDatePickerTag the following:
        public _formGroup: FormGroup;</p>

<pre><code>    @Input () set groupName(newGroup: FormGroup){
        this._formGroup = newGroup;
    }
</code></pre>

<p>Now I get in console.log: </p>

<blockquote>
  <p>Cannot find control with unspecified name attribute</p>
</blockquote>

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