title: Angular 2 - Error no value accessor for form control with name
body: <p>I am using Ionic 2 framework, trying to retrieve data from a local host using php, and display on application. I am able to fetch the data from database for my first page(listingPage), however, when it comes to the second page(StoreInfoPage), I receieve the Error: no value accessor for form control with name. I'm not really sure which part did I do wrong.</p>
  
  <p>In addition, I only plan to display the data, there should not be any update/delete/insert. I'm not sure whether I'm doing it the right way, appreciate any help and suggestions given.</p>
  
  <p><strong>listing.html</strong></p>
  
  <pre><code>  &lt;ion-item *ngFor="let listing of listings"&gt;
  &lt;ion-avatar item-start&gt;
    &lt;img height="60" width="60" src="xxx.jpg"&gt;
  &lt;/ion-avatar&gt;
    &lt;h2 class="payment_color"&gt;{{ listing.ListingTitle }}&lt;/h2&gt;
    &lt;p&gt;{{ listing.ListingDate }} {{ listing.ListingTime }}&lt;/p&gt;
  &lt;ion-note item-end&gt;  
  &lt;p&gt;&lt;button (click)="viewEntry({ record: listing })" ion-button color="danger"&gt;Apply&lt;/button&gt;&lt;/p&gt;
    &lt;/ion-note&gt;
  &lt;/ion-item&gt;
  </code></pre>
  
  <p><strong>listing.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController,ModalController } from 'ionic-angular';
  import { ActionSheetController } from 'ionic-angular';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  @Component({
  selector: 'page-list',
  templateUrl: 'listview.html'
  })
  
  export class ListPage {
  
  public listings : any = [];
  
  constructor(public navCtrl: NavController, 
  public actionSheetCtrlCat: ActionSheetController, 
  public actionSheetCtrljob_type: ActionSheetController,
  public actionSheetCtrlLoc: ActionSheetController,
  public actionSheetCtrlSal: ActionSheetController,
  public modalCtrl: ModalController,
  public http: Http
  ){}
  
  ionViewWillEnter(){
  this.load();
  }
  
  load()
  {
  this.http.get('http://localhost/php-mysql/retrieve-
  data.php')
  .map(res =&gt; res.json())
  .subscribe(data =&gt;
  {
     this.listings = data;
  });
  }
  
  viewEntry(param)
  {
    this.navCtrl.push('StoreInfoPage', param);
  }
  </code></pre>
  
  <p><strong>storeInfo.html</strong></p>
  
  <p></p>
  
  <pre><code>&lt;ion-row&gt;
  &lt;ion-card&gt;
    &lt;img src="xxx.jpg"&gt;
    &lt;div class="card-title"&gt;xxx&lt;/div&gt;
    &lt;div class="card-subtitle"&gt;xxx&lt;/div&gt;
  &lt;/ion-card&gt;
  &lt;/ion-row&gt;
  
  &lt;ion-row&gt;
  &lt;ion-col col-12 text-center &gt;
   &lt;p formControlName="ListingDate" [(ngModel)]="ListingDate"&gt; xxx&lt;/p&gt;
   &lt;p&gt;xxx&lt;/p&gt;
    &lt;/ion-col&gt;
  &lt;/ion-row&gt;
  
  &lt;ion-row&gt;
  &lt;ion-col col-12&gt;
    &lt;h6&gt;xxx&lt;/h6&gt;
    &lt;p&gt; xxx&lt;/p&gt;
    &lt;/ion-col&gt;
  &lt;/ion-row&gt;
  
   &lt;div text-center&gt;
   &lt;button fab-center ion-button color="primary" 
   (click)="applyAlert()"&gt;
    Apply
   &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>storeInfo.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { IonicPage, NavController, 
  NavParams,ViewController,AlertController,ToastController } from ' 
  ionic-angular';
  import { Http, Headers, RequestOptions } from '@angular/http';
  import 'rxjs/add/operator/map';
  import { FormGroup, Validators, FormBuilder } from '@angular/forms';
  
  @IonicPage()
  @Component({
  selector: 'page-store-info',
  templateUrl: 'store-info.html',
  })
  
  export class StoreInfoPage {
  public ListingDate     : any;
  public form            : FormGroup;
  
  constructor(public navCtrl: NavController, 
  public navParams  : NavParams,
  public viewCtrl   : ViewController,
  public alertCtrl  : AlertController,
  public http       : Http,
  public NP         : NavParams,
  public fb         : FormBuilder,
  ) {
  
    this.form = fb.group({
       "ListingDate"  : ["", Validators.required],
    });   
  
  }
  
    ionViewWillEnter()
    {
       this.NP.get("record");
    }
  
    selectEntry(listing)
    {
    this.ListingDate           = listing.ListingDate;
    }
    }
  </code></pre>