表单提交的REST API POST请求问题

时间:2017-11-22 09:08:58

标签: angular rest

当我提交表单时,我收到此错误。我正在使用POST请求提交表单。

我不确定为什么服务器没有给出404错误。

enter image description here

user.service.ts

postInvoiceDetails(invoice: Invoice): Observable<Invoice>{
        let headers = new Headers();
        headers.append("Content-Type", 'application/json');
        headers.append("Content-Type", "application/hal+json");
        headers.append('Authorization', 'Basic ' + btoa('apiuser:@piUser@2017Supplier'));
        let requestoptions = new RequestOptions({ headers: headers });

        return this.http.post(this.config.apiUrl + 'entity/node?_format=hal_json', JSON.stringify(invoice), requestoptions)
        .map(response => response.json());
    }

invoice.component.ts

postedInvoices: Invoice[];
  errorMessage: string;
  invoice = new Invoice;
  submitted = false;

  constructor(private _userService: UserService) { 
    console.log('Invoice Details loaded!');
  }

  ngOnInit() {
    this._userService.getInvoiceDetails()
    .subscribe(data => this.postedInvoices = data);
  }

  newInvoice(): void{
    this.submitted = false;
    this.invoice = new Invoice();
  }

  private save(): void{
    this._userService.postInvoiceDetails(this.invoice)
    .subscribe(invoice => {
      console.log(invoice);
    });
  }

  onSubmit() {
    this.submitted = true;
    this.save();
  }

invoice.component.html

    <!-- Dialog Box Markup -->
    <div class="container">
    <app-dialog [(visible)]="showDialog">
      <form (ngSubmit)="onSubmit(); myNgForm.resetForm()" #myNgForm="ngForm"> 
        <div style="background-color:#363636; color:#ffffff; padding: 7px;
        margin: -12px -12px 12px -12px;">ADD NEW INVOICE</div>
          <div>    
            <div>
              <label for="invoiceNumber" class="form-required">
              Invoice Number *
              </label>   
              <input class="form-control" id="invoiceNumber" [(ngModel)]="invoice.invoiceNumber" name="invoiceNumber" value="" size="60" maxlength="255" placeholder="" required aria-required="true">
            </div>
          </div>

        <div>
          <label for="mydate">Date *</label>   
          <my-date-picker name="mydate" id="mydate" [(ngModel)]="invoice.mydate" [options]="myDatePickerOptions" required>
          </my-date-picker>    
        </div>

        <div>
          <label for="details">Details *</label>
          <textarea rows="5" cols="60" name="details" id="details" [(ngModel)]="invoice.details"></textarea>
        </div>

        <div>
            <label for="field_type">Type *</label>
            <div class="fieldset-wrapper">
              <div>
                <div>
                  <label for="field_type" class="control-label option">
                    <input class="form-radio" type="radio" name="field_type" id="field_type" [(ngModel)]="invoice.field_type" value="1" checked="checked">
                    Consolidated
                  </label>
                </div>
              <div>
                <label for="field_type" class="control-label option">
                  <input class="form-radio" type="radio" name="field_type" id="field_type" [(ngModel)]="invoice.field_type" value="2">
                  One Trip
                </label>
              </div>
              </div>        
            </div>
        </div>

        <div>
            <label for="field_upload_invoice_0" class="form-required">
              Upload Invoice
            </label>    
        <div>
        <div>
          <input class="form-control" type="file" name="field_upload_invoice_0" id="field_upload_invoice_0" [(ngModel)]="invoice.field_upload_invoice_0" size="22">
          </div>
        </div>   
        <div class="description help-block">
              One file only.2 MB limit.Allowed types: <code>csv, pdf, xls, doc, docx, txt, xlsx</code>.
        </div>
        </div>

      <div>      
          <div>
        <label for="amount" class="form-required">Amount *</label>
        <input class="form-control" type="text" name="amount" id="amount" [(ngModel)]="invoice.amount" value="" size="60" maxlength="255" placeholder="" required aria-required="true">
      </div> 
      </div>

      <div class="btn-group" >    
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
   </form>

      <div [hidden]="!submitted">   
        <h4>You submitted successfully!</h4>  
    </div>

      </app-dialog>   

    </div>
      <!--Dialog box markup end -->

invoice.ts

export class Invoice {
    title: number;
    field_type: number;
    field_amount: number;
    field_first_name: string;
    field_last_name: string;
    mail: string;
    field_upload_invoice: string;
    nid: number;
    field_date: string;
 } 

任何人都可以帮助我。我很震惊。我不确定我的代码中的错误。

感谢。

0 个答案:

没有答案