2017-05-11 7 views
0

FormGroupにイオン入力付きのページがあります。 ページに移動すると、サーバーからデータが読み込まれます。データが入ってくると、私はイオン入力がサーバーからのデータで満たされるようにし、ユーザーはそれを編集して保存することができます。 データを表示するためにイオン入力を取得できません。イオン2リフレッシュするイオン入力テキストを取得

import { Component,ViewChild } from '@angular/core'; 
    import { Validators, FormBuilder, FormGroup } from "@angular/forms"; 
    import { NavController, App, MenuController, NavParams, AlertController,Content } from 'ionic-angular'; 
    import {DomSanitizer,SafeResourceUrl} from '@angular/platform-browser'; 
    import { TabsPage } from '../tabs/tabs'; 

    // Providers 
     import { ProjectDetailService } from '../../providers/project-detail-service'; 

    @Component({ 
     selector: 'page-form', 
     templateUrl: 'form.html', 
    }) 
    export class FormPage { 

    @ViewChild(Content) content: Content; 

    newObject: FormGroup; 
    object: any = {}; 
    objectKey: string = ""; 
    pageTitle: string = "Create New"; 
    videoURL: SafeResourceUrl; 
    sanitizer: DomSanitizer; 
    updating: boolean = false; 

    constructor(public formBuilder: FormBuilder, 
        public service: ProjectDetailService, 
        public navParams: NavParams, 
        public app: App, 
       public alertCtrl: AlertController, 
       sanitizer: DomSanitizer) { 

        this.sanitizer = sanitizer; 

        this.newObject = this.formBuilder.group({ 
         name: this.object.name 
        }); 

    } 

    setData() 
    { 
     this.newObject.value.name = this.object.name; 


     //none of these work: 
//this.content.resize(); 
     //window.location.reload(); 
      //this.app.getRootNav().setRoot(this.app.getRootNav().getActive().component); 
    } 

    ionViewDidLoad() 
    { 
     this.objectKey = this.navParams.get('projectKey'); 
     console.log("objectkey="+this.objectKey) 

      this.service.getProject(this.objectKey).subscribe((data: any) => { 
       this.object = data; 

       this.setData(); 
      }) 


    } 

これはhtmlです::

<ion-content padding> 
    <form [formGroup]="newObject" (ngSubmit)="save()"> 

     <ion-item> 
     <ion-label>Project Name</ion-label> 
     <ion-input type="text" formControlName="name"></ion-input> 
     </ion-item> 
</form> 


</ion-content> 
+0

データが到着した後にフォームを作成する可能性がありますか? –

答えて

1

私はFormBuilderがbindierが代わりのように結合シンプルな2つのウェイを使用する2つの方法ではないと思います。ここ

がページです(これは空白のまま)

としてこの

<ion-input type="text" [(ngModel)]="name" formControlName="name"></ion-input> 

とアクセス

this.name = 'something'; 
関連する問題