CODEWITHSUNDEEP
angularangular2-forms
Bo Cao
Bo Cao

Reputation: 39

how to grab data from json and create new form send to api in angular 2

I'm trying to submit a form group in angular2 but My data don't want to user to fill in. I want to get data from Json data which I get from the backend API through the GET method. But How I can Use the data in the new from group which I want to submit to the backend API. I want to warp rfidCode and username in to new form.

<div class="container-fiuld">
  <form [formGroup]="searchuserform" (ngSubmit)="onSearchUser()">
    <div class="form-content">
      <div class="form-group">
        <label for="usernames">username</label>
        <input type="text"
               class="form-control input-underline input-lg"
               id="usernames"
               name="usernames"
               formControlName="usernames"
               >
      </div>
    </div>
    <button type="submit"class="btn rounded-btn"> search </button>
  </form>
  <form [formGroup]="searchtoolform" (ngSubmit)="onSearchTool()">
    <div class="form-content">
      <div class="form-group">
        <label for="rfidCode">tool</label>
        <input type="text"
               class="form-control input-underline input-lg"
               id="rfidCode"
               name="rfidCode"
               formControlName="rfidCode"
               >
      </div>
    </div>
    <button type="submit"class="btn rounded-btn"> search </button>
  </form>

  <div class="user-card">
    <div class="card ">
      <img src="assets/img/SB-admin.png" width="150px" style="witdth:30%">
      <div class="card-container" *ngFor="let user of searchuser">
        <h4><b>员工:{{user.username}}</b></h4>
        <p >职工号:{{user.empID}}</p>
      </div>
    </div>
  </div>
  <div class="tool-card">
    <div class="card ">
      <img src="assets/img/tools.jpg" width="150px" style="witdth:30%">
      <div class="card-container" *ngFor="let tool of searchtool">
        <h4><b>tool:{{tool.tool}}</b></h4>
        <p>toolinfo:{{tool.toolmodel}}</p>
        <p >toolrfid:{{tool.rfidCode}}</p>
      </div>
    </div>
  </div>
<br>

<form [formGroup]="toolusageform" (ngSubmit)="onToolUsage()">
  <div class="form-content">
    <div class="form-group">
  <p *ngFor="let user of searchuser" formControlName="username">{{user.username}}</p>
  <p *ngFor="let tool of searchtool" formControlName="rfidCode">{{tool.rfidCode}}</p>
  <button type="submit" class=" btn col-lg-4 function" value="borrow">toolborrow</button>
</div>

Upvotes: 0

Views: 1229

Answers (1)

hakany
hakany

Reputation: 7264

You could set the formGroups searchuserform and searchtoolform after you recieve with your get call in the subscribe part.

Create a function which handles the formGroup, for example for searchuserform

SetSearchUserForm(data:any) {
  this.searchuserform = new FormGroup({
        // I assume that data which is received from your WEBAPI contains a key usernames and want to set this in your formControl 
        usernames: new FormControl(data.usernames, [<any>Validators.required, ...] })
}

and call this function in subscribe part of your GET

this.http.get('http://your_url')
        .subscribe(
            result => SetSearchUserForm(result),
            error => fnOnError(),
            () => fnDoAlways()
        );

Hope this helps.

Upvotes: 2

Related Questions