Как опубликовать данные формы с помощью шаблонно-управляемых форм с использованием угловых 4 - PullRequest
Новая
       57

Как опубликовать данные формы с помощью шаблонно-управляемых форм с использованием угловых 4

0 голосов
/ 31 октября 2019

Я хочу опубликовать данные полезной нагрузки запроса при отправке полей формы как post 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>

component.ts 

export class AppComponent implements OnInit {
  StudentRequest = {};

  ComplaintRequest() {

  }
}

Service.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`);
    }
  });
}

1 Ответ

0 голосов
/ 31 октября 2019

Вы можете использовать с html-тегом form свойства [form] и [formGroup], например, так: 

<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

}
...