Angular 2 - Error no value accessor for form control with name

Question

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.

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.

listing.html

  <ion-item *ngFor="let listing of listings">
<ion-avatar item-start>
  <img height="60" width="60" src="xxx.jpg">
</ion-avatar>
  <h2 class="payment_color">{{ listing.ListingTitle }}</h2>
  <p>{{ listing.ListingDate }} {{ listing.ListingTime }}</p>
<ion-note item-end>  
<p><button (click)="viewEntry({ record: listing })" ion-button color="danger">Apply</button></p>
  </ion-note>
</ion-item>

listing.ts

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 => res.json())
.subscribe(data =>
{
   this.listings = data;
});
}

viewEntry(param)
{
  this.navCtrl.push('StoreInfoPage', param);
}

storeInfo.html

<ion-row>
<ion-card>
  <img src="xxx.jpg">
  <div class="card-title">xxx</div>
  <div class="card-subtitle">xxx</div>
</ion-card>
</ion-row>

<ion-row>
<ion-col col-12 text-center >
 <p formControlName="ListingDate" [(ngModel)]="ListingDate"> xxx</p>
 <p>xxx</p>
  </ion-col>
</ion-row>

<ion-row>
<ion-col col-12>
  <h6>xxx</h6>
  <p> xxx</p>
  </ion-col>
</ion-row>

 <div text-center>
 <button fab-center ion-button color="primary" 
 (click)="applyAlert()">
  Apply
 </button>
</div>

</form>

storeInfo.ts

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;
  }
  }

Answer 1

I guess your problem is this here in storeInfo.html:

<p formControlName="ListingDate" [(ngModel)]="ListingDate"> xxx</p>

Take a look at the documentation for proper use. You should use this formControlName for inputs within a form.