在 Angular 2 中成功提交表单时发送 Httpclient POST

Question

目前当我提交表单时，HttpClient POST不会执行。但是，如果我将e.preventDefault()添加到sendBreakdown()方法中，则 POST 将成功运行。尽管发生这种情况时，表单不会在电子邮件<input>字段上提交或运行任何验证。

最终，我想将用户在表单中输入的Data[]和电子邮件地址发送到我的 HttpClient POST。

问题：

a( 如何在不使用e.preventDefault的情况下，在成功提交表单时(并且仅(运行 HttpClient POST？

b(如何获取电子邮件字段，并将其与其他数据一起发送到 POST 请求？

已完成.组件.html

<form class="form-group-submit">
<div class="form-group">
<input type="email" class="form-control" id="email" required  placeholder="Enter your Email Address">
<button type="submit" class="btn btn-success submit-button" (click)="sendBreakdown($event)">Send Detailed Breakdown</button>
</div>
</form>

finish.component.ts

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {ApiService} from '../api.service';
@Component({
selector: 'app-finished',
templateUrl: './finished.component.html',
styleUrls: ['./finished.component.scss'],
})
export class FinishedComponent implements OnInit {
data = [
{
name: 'Testdata',
capacity: 11,
id: this.generateId()
},
{
name: 'Testdata2',
capacity: 101,
id: this.generateId()
}
];
constructor(private apiService: ApiService) {
}
ngOnInit() {
}
sendBreakdown(e) {
e.preventDefault();
this.apiService.sendEmail(this.data).subscribe(
(response) => console.log(response),
(error) => console.log(error)
);
}
private generateId() {
return Math.round(Math.random() * 10000);
}
}

api.service.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
@Injectable()
export class ApiService {
serverUrl = 'myServerUrlHere';
constructor(private httpClient: HttpClient) { }
sendEmail(data: any[]) {
return this.httpClient.post(this.serverUrl, data);
}
}

Answer 1

使用以下编辑来获取电子邮件地址：

<form class="form-group-submit">
<div class="form-group">
<input type="email" class="form-control" id="email" required  placeholder="Enter your Email Address" [(ng-model)]="EmailId">
<button type="submit" class="btn btn-success submit-button" (click)=getById(PostId)"">Send Detailed Breakdown</button>
</div>
</form>

这将处理与您的电子邮件 ID 的 2 向模型绑定。您的 ng-click 指令将选取在输入元素中输入的正确值。获取数据后，只需将其与要发送的 POST 请求绑定即可。

对于您的第一个问题：在您的 .TS 文件。

EmailId : String;
finalData : any;

让你像这样发送细分功能：

sendBreakdown(e) {
finalData = angular.extend(this.data, JSON.stringify({"Email" : this.EmailId}));
this.apiService.sendEmail(this.finaldata).subscribe(
(response) => console.log(response),
(error) => console.log(error)
);

}