Form Post with Body in Angular 2

Question

I am trying to post a form to an api with body how I can Do it. I have done so far. I want to get values from the form and send it in to api body. I have no Idea how I can Do this. now I just pass body hard coded but i want it to get the values from the form and send as a body.

code

 inviteUser() {
        let headers = new Headers();
        headers.append('Content-Type','application/json');
        let body = {
            "UserName": "user1",
            "Email": "user1@atea.com",
            "PartnerId": "1"
        };

        this.http.post('https://localhost:44300/api/apis/InviteUser', JSON.stringify(body), {
            headers: headers
        })
            .subscribe(
            data => this._data = data.json(),
            err => this.logError(err),
            () => console.log(body)
            );
    }

Html

<h1>Pending Approvals </h1>
<link href="../../Content/bootstrap.css" rel="stylesheet" />
<link href="../../Content/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
    <div class="row">
        <div class="col-offset-md-10">
            <button type="button" class="btn-u  pull-center" data-toggle="modal" data-target="#myModal">Invite User</button>
        </div>

    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Account Manager</th>
                            <th>Subscription</th>
                            <th>Created By</th>
                            <th>Pending</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let user of _data">
                            <th>{{user.AccountManagerId}}</th>
                            <th>{{user.SubscriptionId}}</th>
                            <th>{{user.CreatedBy}}</th>
                            <th>
                                <button type="button" class="btn btn-xs btn-danger" (click)="approvalPendingRequest(user.SubscriptionId)">
                                    <span class="glyphicon glyphicon-send"></span>&nbsp;
                                </button>
                            
                           </th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add New User</h4>
            </div>
            <div class="modal-body">
                <form (submit)='inviteUser()'>
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" required
                                name="name">
                    </div>
                    <div class="form-group">
                        <label for="alterEgo">Email</label>
                        <input type="email" class="form-control" required
                                name="alterEgo">
                    </div>
                    <div class="form-group">
                        <label for="power">Partner</label>
                        <select class="form-control" 
                                 name="power">
                            <option *ngFor="let p of powers" [value]="p">{{p}}</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-default" data-dismiss="myModal">Invite</button>
                </form>
            </div>

        </div>

    </div>
</div>

Detail

Now I want to get the values from the form and send it to api as body of it.

Answer 1

You have to use Form directives and all that things for getting value from form and post it using http.

in your .html

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">

  <div class="col-md-7">
    Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'>
  </div> 

  <div class="col-md-7">
    Email:   <input type="text" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password'>
  </div>

  <div class="col-md-7">
    partner:   <input type="text" [(ngModel)]='demoInfo.partner' class="form-control" ngControl='partner'>
  </div>

</form>
<br>
<div class='text-center'>
  <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button>
</div>

and in your .ts

this.CreateGroup = fb.group({
            'name': new Control(this.demoInfo.name, Validators.required),
            'password': new Control(this.demoInfo.password, Validators.required),
            'partner': new Control()
        })

than send data using http like this -

PostRequest(url,data) {
        this.headers = new Headers();
        this.headers.append("Content-Type", 'application/json');

        this.requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: url,
            headers: this.headers,
            body: JSON.stringify(data)
        })

        return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                if (res) {
                    return [{ status: res.status, json: res.json() }]
                }
            });
    }

i have created one example for the same for you see here etc Working example

see here also-

• Sending Data http rest apis in angular 2
• Forms In angular2

Answer 2

Create form in constructor

  form: ControlGroup;

  constructor(private fb: FormBuilder, private fba: FbaService, private router: Router) {
    this.form = this.createForm();
  }

  createForm() {
    return this.fb.group({
      "name": ["", Validators.required],
      "email": ["", Validators.required],
      "partner": [""]
    });
  }

Then integrate this form with html.

<form ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
  <div class="form-group">
    <input [ngFormControl]="form.controls['name']" type="text" class="form-control">
    <span class="text-danger" *ngIf="!form.controls['name'].valid && form.controls['name'].dirty">
      Field Required
    </span>
  </div>
  <div class="form-group">
    <input [ngFormControl]="form.controls['email']" type="text" class="form-control">
    <span class="text-danger" *ngIf="!form.controls['email'].valid && form.controls['email'].dirty">
      Field Required
    </span>
  </div>
     <div class="form-group">
    <input [ngFormControl]="form.controls['partner']" type="text" class="form-control">
    <span class="text-danger" *ngIf="!form.controls['partner'].valid && form.controls['partner'].dirty">
      Field Required
    </span>
  </div> 
  <input [disabled]="!form.valid" type="submit" class="btn btn-default" value="Add">
</form>

Then use form.value as body in onSubmit.

  onSubmit(value) {
    let headers = new Headers();
    headers.append('Content-Type','application/json');

  this.http.post('https://localhost:44300/api/apis/InviteUser',value, {
        headers: headers
    })
        .subscribe(
        data => this._data = data.json(),
        err => this.logError(err),
        () => console.log(body)
        );
  }