Angular 4、获取表单数据，编辑并上传

Question

我正在努力学习 Angular 4. 边做边学。

我想做的是
1. 以json形式从服务器获取数据。 [完成]
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:

let formArr = this.rForm.controls.add as FormArray;
this.data.forEach(x => {
  formArr.push(this.fb.group({
    id: x.id,
    deposit: x.deposit,
    year: x.year,
    maturity: x.maturity
  }))
})

然后如前所述，在您的模板中迭代该 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>

并且无需将初始表单组插入到表单数组中，只需将其设置为空即可：

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

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

Angular 4、获取表单数据，编辑并上传

Angular 4, Fetch Form Data, Edit and Upload

angular

angular4-forms