Angular 4, Fetch Form Data, Edit and Upload

Question

I'm trying to learn Angular 4. Learning by doing.

What I'm trying to do is,
1. Get data from server in json form. [done]
2. Populate it into forms. [with some issues]
3. Let the user make changes to those data [done]
4. Send the new data as json to the server.[problem: cant get the data from form]

Issue I'm facing is, when I try to submit the form, I'm not getting that data from the form. Any help is appreciated.
My template file

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

Component File:

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));
  }

}

Here is how JSON looks like

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

AVJT82 · Accepted Answer · 2017-10-07 17:09:25Z

2

Use the formArray, insert the values to it and then iterate the formarray in your template instead of data. So when you receive your data, iterate it and insert the values to your 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
  }))
})

Then as mentioned, iterate that formarray in your template and just use formControlName instead of 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>

and there is no need to insert the initial formgroup to the form array, you can just set it as empty:

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

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

edited Oct 7, 2017 at 17:09

answered Oct 7, 2017 at 16:34

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Syed Afzal Over a year ago

Could'nt make it work. Property 'push' does not exist on type 'AbstractControl'

Syed Afzal Over a year ago

Checking Plnkr will let u knw

AVJT82 Over a year ago

There was a type casting issue. Change let formArr = this.rForm.controls.add; to let formArr = this.rForm.controls.add as FormArray and that should do it hopefully! :)

Syed Afzal Over a year ago

Thanks a lot! Now everything makes sense.

Collectives™ on Stack Overflow

Angular 4, Fetch Form Data, Edit and Upload

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related