Angular 4，提取表單數據，編輯和上傳

Question

我正在試着學習Angular 4。

我想要做的是，從JSON形式的服務器
1.獲取數據。 [完成]
2.將它填充到表單中。 [有一些問題]
3.讓用戶更改這些數據[完成]
4.發送新數據爲JSON到服務器。[問題：不能得到表單中的數據]

我面臨的問題是，當我嘗試提交表單時，我沒有從表單中獲取這些數據。 任何幫助表示讚賞。
我的模板文件

<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的樣子

[ 
{"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

使用formArray，插入值，然後遍歷formarray在您的模板而不是data。所以，當你收到你的數據，迭代並插入值，以您的formarray add：

​​

然後如前所述，迭代是formarray在你的模板，只是使用formControlName，而不是value：

<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> 

，也沒有必要插入初始formgroup的形式排列，你可以將其設置爲空：

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

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