Angular 4, выборка данных формы, редактирование и загрузка


Я пытаюсь изучить 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"}
]

angular angular4-forms
person Syed Afzal    schedule 07.10.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Используйте 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

person AJT82    schedule 07.10.2017
comment
Не удалось заставить его работать. Свойство push не существует для типа AbstractControl - person Syed Afzal; 07.10.2017
comment
Проверка Plnkr позволит вам узнать - person Syed Afzal; 07.10.2017
comment
Возникла проблема с приведением типа. Измените let formArr = this.rForm.controls.add; на let formArr = this.rForm.controls.add as FormArray, и мы надеемся, что это должно сработать! :) - person AJT82; 07.10.2017
comment
Большое спасибо! Теперь все имеет смысл. - person Syed Afzal; 07.10.2017