I am struggling to figure out how to send a form to an API with the body. I have managed to hard code the body so far, but I really need to dynamically retrieve values from the form and send them as the body to the API. Can someone please guide me on how to achieve this?
code
inviteUser() {
let headers = new Headers();
headers.append('Content-Type','application/json');
let body = {
"UserName": "user1",
"Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a2f293f286b1a3b2e3f3b3a1a63f222e22230a3b262a28">[email protected]</a>",
"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>
</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">×</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>https://i.sstatic.net/BlpQn.png
Detail
I am looking to dynamically pull form values and send them as the body to the API. Any help would be greatly appreciated.