2017-11-25 7 views
2

イオン入力のあるページから別のページにデータを渡したいと思います。私は 3.イオンは、ここに私のコードで使用してい ...Ionic 3のイオン入力で、あるフォームから別のフォームへデータをどのように渡しますか?

home.tsは

​​

addtechnology.tsがファイルファイル

constructor(public navCtrl: NavController, 
      public navParams: NavParams, 
      public http: Http, 
      public fb: FormBuilder, 
      public toastCtrl: ToastController) { 

    this.recordID = navParams.get('ID'); 
    this.technologyName = navParams.get('name'); 
    this.technologyDescription = navParams.get('description'); 


    console.log(this.recordID); 
    console.log(this.technologyName); 
    console.log(this.technologyDescription); 


    // Create form builder validation rules 
    this.form = fb.group({ 
     "name"     : ["", Validators.required], 
     "description"   : ["", Validators.required] 
    }); 
} 

addtechnology.htmlファイル

<form [formGroup]="form"> 

     <ion-list> 
     <ion-item-group> 
      <ion-item-divider color="light">Technology Name *</ion-item-divider> 
      <ion-item> 
       <ion-input 
        type="text" 
        placeholder="Enter a name..." 
        formControlName="name" 
        [(ngModel)]="technologyName" ></ion-input> 
      </ion-item> 
     </ion-item-group> 
     <ion-item-group> 
      <ion-item-divider color="light">Technology Description *</ion-item-divider> 
      <ion-item> 
       <ion-textarea 
        placeholder="Description..." 
        formControlName="description" 
        rows="6" 
        [(ngModel)]="technologyDescription"></ion-textarea> 
      </ion-item> 
     </ion-item-group> 


     <ion-item> 
      <button 
       ion-button 
       color="primary" 
       text-center 
       block 
       [disabled]="!form.valid" 
       (click)="saveEntry()">Save Entry</button> 
     </ion-item> 

     </ion-list> 

    </form> 

addtechnology.htmlのイオン入力に関するデータを表示したいとします。 データはaddtechnolgy.tsファイルに表示されますが、イオン入力にバインド/表示する方法はありますか? ありがとうございます。

答えて

1

フォームを初期化するときには、このように、値を渡すことができます。

// Create form builder validation rules 
this.form = fb.group({ 
    "name": [this.technologyName, Validators.required], 
    "description": [this.technologyDescription, Validators.required] 
}); 

そして、各入力には、単に(代わりに、フォームコントロールとngModel両方の)フォームコントロールを使用します。

 <ion-item-group> 
     <ion-item-divider color="light">Technology Name *</ion-item-divider> 
     <ion-item> 
      <ion-input 
       type="text" 
       placeholder="Enter a name..." 
       formControlName="name"></ion-input> 
     </ion-item> 
    </ion-item-group> 
    <ion-item-group> 
     <ion-item-divider color="light">Technology Description *</ion-item-divider> 
     <ion-item> 
      <ion-textarea 
       placeholder="Description..." 
       formControlName="description" 
       rows="6"></ion-textarea> 
     </ion-item> 
    </ion-item-group> 
関連する問題