角度4、フォームデータを取得し、編集してアップロードする

Question

私は角度4を学習しようとしています。私がやろうとしている何

は、JSON形式でサーバーから
1.取得データです。 [done]
2.フォームに入力します。
3. [いくつかの問題で]サーバーへのJSONなどの新しいデータを送信し、[問題：フォームからデータを取得カント]
4. [完了]ユーザーがこれらのデータに変更を加えてみましょう。

を私が直面している問題は、フォームを送信しようとすると、フォームからそのデータを取得できないということです。 何か助けていただければ幸いです。
マイテンプレートファイル

<div *ngIf="!name; else forminfo"> 
    <form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)"> 
    <div class="form-container"> 
     <h1>Enter Details</h1> 
     <div class="row columns" *ngFor="let item of data;let i=index;" > 
<div formArrayName="add"> 
     <label>ID 
      <input type="text" formControlName="id" value="{{item.id}}"> 
     </label> 

     <label>Deposit 
      <input type="text" formControlName="deposit" value="{{item.deposit}}"> 
     </label> 


     <label>Year 
      <input type="text" formControlName="year" value="{{item.year}}"> 
     </label> 

     <label>Maturity 
      <input type="text" formControlName="maturity" value="{{item.maturity}}"> 
     </label> 

     </div> 

     </div> 
     <!-- [disabled]="!rForm.valid" --> 
     <input type="submit" class="button expanded" value="Submit Form" > 
    </div> 
    </form> 
</div> 

<ng-template #forminfo> 
    <div class="form-container"> 
    <div class="row columns"> 
     <h1>{{ name }}</h1> 

     <p>{{ description }}</p> 
    </div> 
    </div> 
</ng-template> 

コンポーネントファイル：

import { Component } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import {Http,Response} from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    rForm: FormGroup; 
data:any; 
    constructor(private fb: FormBuilder,private http: Http) { 
    this.rForm = fb.group({ 

     add: this.fb.array([ 
     this.fb.group({ 
      id: [''], 
      deposit: [''], 
      year: [''], 
      maturity: [''], 
     }) 
    ]), 

    }); 
    } 


    ngOnInit() { 
    this.http.get('http://svcsociety.com/json/yojna.txt').map((res: Response) => 
    res.json()).subscribe(res => { 
           this.data = res; 
           //console.log(JSON.stringify(this.data)); 
           }); 

    } 

    addPost(post) { 
    alert(JSON.stringify(post)); 
    } 

} 

ここでは、JSONは、formArrayを使用し、それに値を挿入し、反復

[ 
{"id":"1", "deposit": "Rs 50,000","year":"18","maturity":"Rs 4,00,000"}, 
{"id":"2", "deposit": "Rs 1,00,000","year":"18","maturity":"Rs 8,00,000"}, 
{"id":"3", "deposit": "Rs 1,50,000","year":"18","maturity":"Rs 12,00,000"}, 
{"id":"4", "deposit": "Rs 2,00,000","year":"18","maturity":"Rs 16,00,000"}, 
{"id":"5", "deposit": "Rs 250000","year":"18","maturity":"Rs 20,00,000"}, 
{"id":"6", "deposit": "Rs 300000","year":"18","maturity":"Rs 24,00,000"} 
] 

Answer 1

どのように見えるかですテンプレート内のdataの代わりにformarrayを使用してください。あなたがあなたのデータを受信したときので、それを反復処理し、あなたのformarray addに値を挿入します。

​​

次に、あなたのテンプレートにformarrayだけvalueの代わりにformControlNameを使用言及し、反復など：

<form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)"> 
    <div formArrayName="add"> 
    <div *ngFor="let dat of this.rForm.controls.add.controls; index as i" [formGroupName]="i"> 
     <input formControlName="id" /> 
     <input formControlName="deposit" /> 
     <input formControlName="year" /> 
     <input formControlName="maturity" /> 
    </div> 
    </div> 
    <input type="submit" class="button expanded" value="Submit Form" > 
</form> 

フォーム配列に最初のフォームグループを挿入する必要はありません。空に設定することができます。

this.rForm = fb.group({ 
    add: this.fb.array([]), 
}); 

DEMO：https://stackblitz.com/edit/angular-yxhprn?file=app%2Fapp.component.ts