Why a form does not send a HTTP request in angular 2?

I am trying to send a HTTP request from a form in Angular 2. I have the component class, the service class, and the HTML page. On the HTML page I have 2 forms, one for the GET request, another one for the Post request. The clicks successfully invoke the corresponding method in the service. The console log shows that URL is correct - url=http://localhost:8080/rentapp/policy. However, the request does not reach the server.

If I use the same HTML file without Angular 2 specifying the URL in the request is sent successfully. The link with the same URL also works for both Angular 2 and the HTML file.

So, the Component is create-policy.component.ts

@Component({
selector: 'app-create-policy',
providers: [CreatepolicyService],
templateUrl: './create-policy.component.html',
styleUrls: ['./create-policy.component.css']
})
export class CreatePolicyComponent implements OnInit {

policy = Object.assign(new Policy, {
id: 0,
title: "",
description: ""
});

constructor(private policyService: CreatepolicyService) { }

ngOnInit() {
}
onSubmitPostHttp() {
console.log("Started onSubmitPostHttp policy=" + this.policy);
this.policyService.addPolicyWithObservable(this.policy);
}
onSubmitGetHttp() {
console.log("Started onSubmitGettHttp policy=" + this.policy);
this.policyService.getPolicyWithObservable();
}
}

The HTML file is create-policy.component.html:

<div class="container">
                <form #f="ngForm" (ngSubmit)="onSubmitPostHttp()">
                    <p>
                        <label>Policy Title:</label> <input type="text" name="title"
                            [(ngModel)]="policy.title" required>
                    </p>
                    <p>
                        <label>Policy Description:</label> <input type="text"
                            name="description" [(ngModel)]="policy.description">
                    </p>
                    <p>
                        <button type="submit" [disabled]="!f.valid">Submit</button>
                    </p>
                </form>
                <form #f="ngForm" (ngSubmit)="onSubmitGetHttp()">
                    <p>
                        <button type="submit" [disabled]="!f.valid">Find Policies</button>
                    </p>
                </form>
                <a href="http://localhost:8080/rentapp/policy">PolicyGet</a>
            </div>

The service file is createpolicy.service.ts:

@Injectable()
export class CreatepolicyService {
url = "http://localhost:8080/rentapp/policy";
constructor(private http: Http) {}

public addPolicyWithObservable(policy: Policy): Observable<Policy> {
const headers = new Headers({'Content-Type': 'application/json'});
const options = new RequestOptions({headers: headers});
console.log("addPolicyWithObservable policy=" + policy + " url=" + this.url + " http=" + this.http);
return this.http.post(this.url, policy, options)
  .map(this.extractData)
  .catch(this.handleErrorObservable);
}

getPolicyWithObservable(): Observable<Policy[]> {
console.log("getPolicyWithObservable url=" + this.url);
    return this.http.get(this.url)
   .map(this.extractData)
   .catch(this.handleErrorObservable);
}

private extractData(res: Response) {
const body = res.json();
return body.data || {};
}
private handleErrorObservable(error: Response | any) {
console.error(error.message || error);
return Observable.throw(error.message || error);
}
}

The model file is policy.ts

export class Policy {
public id: number;
public title: string;
public description: string;

toString(): string {
return this.title + ': ' + this.description;
}
}