Question

我对Angular 2和形式概念完全陌生。我正在尝试将表单数据POST到POST API调用。像这样

POST API ：http://localohot:8080/ **********

组件：

user: any = {
    id: null,
    gender: null,
    mstatus: null,
    birthdate: null,
    bloodgroup: null
}

userName: any = {
    id: null,
    personId: null,
    displayName: '',
    prefix: null,
    givenName: null
}

userAddressJSON: any = {
    id: null,
    personId: null,
    address1: null,
    address2: null,
    cityVillage: null
}

var form = new FormData();
form.append('userid', new Blob(['' + uid], { type: 'application/json' }));
form.append('user', new Blob([JSON.stringify(this.user)], { type: 'application/json' }));
form.append('userName', new Blob([JSON.stringify(this.userName)], { type: 'application/json' }));
form.append('userAddress', new Blob([JSON.stringify(this.userAddressJSON)], { type: 'application/json' }));

在这里，我不知道如何进行API调用。在我们的旧应用程序中，他们在jQuery中使用表单数据POST。现在我试图在Angular 2中做同样的事情。当我在旧应用程序中执行POST时，他们就像这样发送

------WebKitFormBoundarybAWvwmP2VtRxvKA7
Content - Disposition: form - data; name = "userid"; filename = "blob"
Content - Type: application / json


------WebKitFormBoundarybAWvwmP2VtRxvKA7
Content - Disposition: form - data; name = "user"; filename = "blob"
Content - Type: application / json


------WebKitFormBoundarybAWvwmP2VtRxvKA7
Content - Disposition: form - data; name = "userName"; filename = "blob"
Content - Type: application / json


------WebKitFormBoundarybAWvwmP2VtRxvKA7
Content - Disposition: form - data; name = "userAddress"; filename = "blob"
Content - Type: application / json

任何人都可以帮我解决Angular 2中的POST形式。

Answer 1

以下是我目前在Angular 2应用程序中进行POST调用的方法，因为听起来您可以使用如何设置表单的简单示例。以下是How to Send Data to the Server上的Angular 2文档。

有关在Angular 2中制作AJAX请求的更高级别文档，请访问此URL。

在我的 app / app.module.ts

中

func mainPageViewController(_ mainPageViewController: MainPageViewController,
                                didUpdatePageIndex index: Int) {
    pageIndex = index
    pageControl.currentPage = index
}

应用/系统设置/系统setup.ts

... import { HttpModule } from '@angular/http'; ... @NgModule({ imports: [ ... HttpModule ... ], declarations: [ ... ], providers: [ ... ], bootstrap: [AppComponent], }) export class AppModule { }

app / form-component / form.component.html （注意[（ngModel）]，即将对象的属性绑定到html输入元素的内容）

export class SystemSetup { system_setup_id: number; name: string; counter: number; }

在 app / form-component / form.component.ts
中
<form class="form" (ngSubmit)="saveEdits()" #editSystemSetupForm="ngForm"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="theName" name="name" [(ngModel)]="selectedItem.name" #itemsName="ngModel" required minlength="3"/> <div [hidden]="itemsName.valid || itemsName.pristine" class="alert alert-danger">Name is required! Min length of 3.</div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="">Counter</label> <input type="number" step=0.01 class="form-control" name="counter" [(ngModel)]="selectedItem.counter" /> </div> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-8"> <button type="submit" class="btn btn-success" style="float: right; margin-left: 15px;" [disabled]="!editISystemSetupForm.form.valid" >Save</button> <button type="button" class="btn btn-danger" style="float: right;" (click)="cancelEdits()">Cancel</button> </div> </div> </form>

这个URL是官方Angular 2文档站点的链接，对于Angular 2开发人员可能想要的任何内容都是非常好的参考。

Angular 2：如何使用表单进行POST调用

1 个答案: