Angular 2 - 带有名称的表单控件没有值访问器错误

Question

我正在使用 Ionic 2 框架，尝试使用 php 从本地主机检索数据并显示在应用程序上。我能够从数据库中获取第一页（listingPage）的数据，但是，当涉及到第二页（StoreInfoPage）时，我收到错误：没有带名称的表单控件的值访问器。我不太确定我哪里做错了。

另外，我只打算展示数据，应该没有update/delete/insert。我不确定我的做法是否正确，感谢您提供的任何帮助和建议。

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

我猜你的问题出在storeInfo.html:

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

查看 documentation 以正确使用。您应该将此 formControlName 用于表单中的输入。

Angular 2 - 带有名称的表单控件没有值访问器错误

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

http

ionic2

angular2-forms