2017-03-25 9 views
0

多くのフォームを持つアプリケーションを開発中です。これらのフォームのいくつかは非常に大きく(50+フィールド)あります。ユーザーは1つまたは複数のフォームに記入することができます。これを送信すると、生成されたJSONがPHPバックエンドに送信され、PHPバックエンドがCSVに変換されます。Ionic 2コンポーネント内で関数を呼び出す

バックエンドPHPサービスは構造を認識せず、各JSON要素を単に列/値に変換します。私は関係なく、形成するかどうかのように、これを変更する必要が

FORM 1, , , FORM 3 
Col1,Col2,Col3,Col1,Col2,Col3 
Val1,Val2,Val3,Val1,Val2,Val3 

:ユーザーが1型および4完了した場合

問題現在

は、生成されたCSVは、次のようになります2が塗りつぶされると、その列は空の値でCSVに印刷されます。このようにして、CSV出力は一貫した構造になります。

type Form2 = { 
     columns : { 
      col1 : string, 
      col2 : string, 
      col3 : string 
     } 
    }; 

    let form2Object = { 
     columns : { 
      col1 : '', 
      col2 : '', 
      col3 : '' 
     } 
    } as Form2; 

しかし、:

考えは、私はこの問題を解決することができ

一つの方法は、単にFORM 2のオブジェクトを定義し、空の値を持つフォーム1及びフォーム3と一緒にそれを送信される接近します私が働いている多くのフォームのためにこれを行うと、それぞれが数多くの列を持ち、文字通り私に数日かかるでしょう。私は、関数を呼び出す方法を見つけ出すことができません、しかし

function returnFormTwo() { 
    return this.formTwo.value 
} 

私はこのことで解決することを望んでいます第二の方法は、そのようにフォーム2の値を返す関数を作成することですイオン2の形態2成分は?

私はこのような何かをしようとしています:

import { FormTwoPage } from '../pages/form-two/form-two'; 

constructor(public navCtrl: NavController, public navParams: NavParams, public appGlobal: AppGlobal, public formTwo: FormTwoPage) {} 

ionViewDidLoad() { 
    let formTwoObj = this.formTwo.returnFormTwo(); 
} 

は、どのように私はこれをやって行くべきですか?

ありがとうございました。

更新:これはFormTwoPageがどのように見えるかです:

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

    export class FormTwoPage { 
     formTwo: FormGroup; 

     constructor(public navCtrl: NavController, public navParams: NavParams, public formBuilder: FormBuilder, public toastCtrl: ToastController, 
      public appGlobal: AppGlobal, public dataService: FormData, public modalCtrl: ModalController) { 

      this.formTwo = formBuilder.group({ 
       col1: [''], 
       col2: [''], 
       col3: ['', Validators.compose([Validators.minLength(3), Validators.maxLength(40)])] 
      }); 
     } 
    } 
+1

は、呼び出し元のコンポーネントのhtmlテンプレートのフォーム部分です。 –

+0

はい、そうです。申し訳ありませんが、私はそれについて言及しませんでした。 – Muhammad

答えて

0

あなたはreturnFormTwo()publicであることを確認しViewChild

import {ViewChild} from '@angular/core'; 

@ViewChild(FormTwoPage) 
formPage:FormTwoPage; 

ionViewDidLoad() { 
    let formTwoObj = this.formPage.returnFormTwo(); 
} 

を使用することができます。あなたはがconstructor.FormTwoPage内のページに注入しているいけない

更新 は、コンストラクタで設定するためのプロバイダではありません。

+0

このエラーが発生します: ランタイムエラー FormTwoPageのすべてのパラメータを解決できません:(NavController、NavParams、FormBuilder、ToastController、AppGlobal、?、ModalController)。 – Muhammad

+0

が更新されましたans –

+0

解決済みですか?あなたは質問にFormTwoPageコンポーネントを追加できないのですか? –

関連する問題