Angular Reactive Formでgrid/arrayを使用するには？

Question

元々Angular 2 Template Formとして作成されました。自動保存機能を追加するために、Reactiveフォームに変換しています。

ページには一連のテキスト入力があり、.NET Web APIを介してバックエンドデータベースに保持されます。角度サービスはウェブAPIを呼び出します。

私は、ページのデータ・コントロールを表すFormGroupを作成しました：

const cells = fb.group({ 
     id: [''], 
     question: [''], 
     actual: [''], 
     budget: [''], 
     average: [''], 
     top20: ['']    
}); 
this.form = fb.group({ 
    reviewer: '', 
    position: '', 
    officeName: '', 
    comments1: '', 
    comments2: '', 
    comments3: '', 
    rows: fb.array([cells, cells]) 
}); 

校閲、位置、officeNameを、そしてフィールドが期待通りに働いているが、私は、データセットを表現する方法を理解するトラブルを抱えているコメントFormGroup内の行とセルのダブル配列（グリッド）として正常に返されます。

this.molForm.patchValue({rows: this.rows}); 

：私はちょうど私のFormGroup項目に this.rowsの値を割り当てた反応型バージョンで

this.rows = summaryReportQuestion.map(summaryReportQuestionObj => { 
     return { 
      cells: [ 
       summaryReportQuestionObj.questionID, 
       summaryReportQuestionObj.question, 
       (summaryReportQuestionObj.columnSign == '$' ? (summaryReportQuestionObj.columnSign + ' ' + summaryReportQuestionObj.target) : summaryReportQuestionObj.target + ' ' + summaryReportQuestionObj.columnSign), 
       (summaryReportQuestionObj.budget == null ? summaryReportQuestionObj.budget : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.budget), false) : summaryReportQuestionObj.budget + ' ' + summaryReportQuestionObj.columnSign)), 
       (summaryReportQuestionObj.average == null ? summaryReportQuestionObj.average : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.average), false) : summaryReportQuestionObj.average + ' ' + summaryReportQuestionObj.columnSign)), 
       (summaryReportQuestionObj.top20Percent == null ? summaryReportQuestionObj.top20Percent : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.top20Percent), false) : summaryReportQuestionObj.top20Percent + ' ' + summaryReportQuestionObj.columnSign)) 
      ] 
     }; 
    }); 

：このようなグリッドデータが観測可能で受信されるテンプレートのフォームバージョンで

、

しかし、私は期待どおりに動作していません。

フォームグループでダブルアレイを使用する最も良い方法は何ですか？

Answer 1

長すぎるコントロールのリストであるため、questionIdとquestionのように、各行に2のセルサイズを使用しようとします。それぞれの列/セルがFormArrayとして初期化されたコントロールによって表されるコントロールのテーブル全体を表すformGroupを作成することができます。各コントロールはFormControlの配列で構成されます（視覚化すると、各列/セル）。

は、あなたがさらに残りのセルのためにこれを開発することができ

this.tableControl = this.formbuilder.group({ 
questionId: new FormArray([new FormControl('1'), new FormControl('2')]), 
question: new FormArray([new FormControl('First Question'), new FormControl('Second Question')]) 
}); 

、値

(name of controls) -->  questionId    question   

    (row1 values) -->   '1'    'First Question' 

    (row2 values) -->   '2'    'Second Question' 

このテーブルのFormGroupのように初期化することができて、あなたは2行を持っていたとします。このtableControl FormGroupにある各コントロールを操作（挿入/削除など）するために、hereというFormArrayコントロールのプロパティで再生することもできます。それが役に立てば幸い。