如何使用 Angular 4 使用模板驱动的表单发布表单数据答案

【问题标题】：How to post the Form data using template driven forms using angular 4如何使用 Angular 4 使用模板驱动的表单发布表单数据
【发布时间】：2020-02-26 18:44:33
【问题描述】：

我想在提交表单字段时发布请求有效负载数据作为发布 API：面临 400 错误请求的问题。

如何传递带有表单详细信息的请求负载？

component.html

<form #RequestForm="ngForm" (ngSubmit)="onSubmit(RequestForm.value)" novalidate>
  <div class="row form-group">
    <div class="col-xs-12">
      <label for="title">Request Title <span class="required-field"> *</span></label>
      <input type="text" class="form-control" id="title" name="title" required [(ngModel)]="StudentRequest.title" #titleControl="ngModel" minlength="1" maxlength="255">
    </div>
    <div class="row form-group">
      <div class="col-xs-12">
        <label for="description">description <span class="required-field"> *</span></label>
        <textarea rows="5" cols="20" class="form-control" id="description" name="description" [(ngModel)]="Request.description" #descriptioncontrol="ngModel" required minlength="1" maxlength="3000"></textarea>
        <div *ngIf="descriptioncontrol.invalid && descriptioncontrol.dirty && descriptioncontrol.touched" class="alert-error">Must be between 1 and 255 characters.</div>
      </div>
      <button class="btn btn-primary" (keyup.enter)="onSubmit()" value="onSubmit()" [disabled]="`enter code here`RequestForm.invalid">Submit Request</button>
    </div>

</form>

组件.ts

export class AppComponent implements OnInit {
  StudentRequest = {};

  ComplaintRequest() {

  }
}

服务.ts

public studentComplaintRequest(request: ComplaintRequest): Observable < HttpResponse < string >> {

  const RequestUrl = //API
  const methodName: string = `${this.serviceName}.studentComplaintRequest`;

  return this.http.post(RequestUrl, {
    headers
  }).map((data: any) => {
    if (data) {
      this.logger.
      debug(`${methodName}: data returned from api call.`);
      return data;
    } else {
      throw new Error(`${methodName}: No data returned from api call`);
    }
  });
}

【问题讨论】：

标签： angular angular4-forms angular4-httpclient

【解决方案1】：

您可以将属性 [form] 和 [formGroup] 与表单 html 标记一起使用，如下所示。

<form [form]="myForm" [formGroup]="myForm" (ngSubmit)="onSubmit()">
<input [formControlName]="firstItemForm">
<input [formControlName]="secondItemForm">
</form>

在你需要的 ts 中

ngOnInit(){
this.myForm = new FormGroup({
    firstItemForm: value, Validators.required,
    secondItemForm: value, Validators,required
    })
}

onSubmit(){
this.myForm // have all the data and then you can manage the http petition after

}

【讨论】：