将值从输入传递到模型的语言

Question

我正在进行一个put请求。在发送表单之前，我如何将输入表单中的值传递给我的模型，以传递我正在填写的值。我尝试过的所有操作都出现了错误。

我的型号.ts文件

export class Uniticket {
pk?: string;
sk?: string;
PK?: string;
SK?: string;
ticketid?: number;
createdate?: Date;
status?: string;
interactionid?: string;
subject?: string;
body?: string;
user?: string;
entitytype?: string;
lastupdate?: Date;
lastupdateuser?: string;
}

我的html:

<form #userPost="ngForm" (ngSubmit)="onSubmit()">
<mat-form-field appearance="legacy">
<input
matInput
type="text"
name="ticketid"
id="ticketid"
[(ngModel)]="ticketid"
/>
<mat-icon *matSuffix>how_to_reg</mat-icon>
</mat-form-field>
<mat-form-field appearance="legacy">
<input
matInput
type="text"
name="createdate"
id="createdate"
[(ngModel)]="createdate"
/>
<mat-icon matSuffix>calendar_today</mat-icon>
</mat-form-field>

我的类型脚本组件：

export class TicketsFormComponent implements OnInit {
ticketid: number = 0;
createdate: string = '';
interactionid: string = '';
subject: string = '';
body: string = '';
user: string = '';
constructor(private service: TicketsService) {}
ngOnInit() {}
public addTicket() {
let resp = this.service.addTicket();
resp.subscribe((report) => {
console.log('report', report);
});
}
onSubmit() {
console.log(this);
this.addTicket();
}
}

提前感谢

Answer 1

您只需要在表单中有一个带有type='submit'的按钮

<form #userPost="ngForm" (ngSubmit)="onSubmit()">
...
<button type="submit">SUBMIT</button>
</form>

这将触发您用(ngSubmit)指定的功能

表单中的数据始终与组件中的数据同步，因为您使用了[(ngModel)]双向绑定。因此，例如，要获得ticketid，您可以使用this.ticketid。

onSubmit() {
//Log the ticket id from the form
console.log(this.ticketid);
}

Answer 2

ng-submit指令指定提交表单时要运行的函数。如果表单没有操作，提交将阻止表单提交。