title: ionic 2: add custom input component in a FORM within a page / Final goal: integrate "cordova-plugin-datepicker" in Ionic 2 Form
body: <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>