2


私は 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"}
]
4

1 に答える 1