Post form to an Api in angular 2

Question

I am trying to post a form to an api with parameter how I can Do it. I have done so far. I am hard the parameter to do this but I want to get values from the form. I have no Idea how I can Do this

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>

image

Answer 1

You can leverage the URLSearchParams class for this. Here is a sample:

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

let params = new URLSearchParams();
params.set('param', 'value');

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

Notice that from RC2, you can provide an object directly to HTTP methods in Angular2:

let body = {
  "UserName": "user1",
  "Email": "user1@atea.com",
  "PartnerId": "1"
};

let params = new URLSearchParams();
params.set('param', 'value');

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

Edit

If you want to post a form, you could use the following:

let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');

let form = new URLSearchParams();
form.set('UserName', 'user1');
form.set('Email', 'user1@atea.com');
form.set('PartnerId', '1');

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