Question

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

我想要做的是，
1.以json格式从服务器获取数据。 [完成]
2.将其填入表格中。 [有些问题]
3.让用户更改[done]数据 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，将值插入其中，然后在模板中而不是data中迭代formarray。因此，当您收到数据时，请迭代它并将值插入到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([]),
});

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

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

1 个答案: