以下是一个解决Angular表单提交被取消的问题的示例代码:
在组件的HTML模板中,可以使用Angular的表单指令来连接表单并显示数据:
Form Data:
Name: {{myForm.value.name}}
Email: {{myForm.value.email}}
在组件的TypeScript文件中,我们可以定义一个onSubmit
方法来处理表单提交事件:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
onSubmit(form: any) {
if (form.valid) {
// 处理表单提交
console.log(form.value);
}
}
}
在上面的示例中,#myForm="ngForm"
指令将表单与名为myForm
的模板引用变量进行绑定。ngSubmit
指令通过调用组件中的onSubmit
方法来处理表单的提交事件。*ngIf="myForm.submitted"
指令用于检查表单是否已提交,并在提交后显示表单数据。
这样,当用户点击“Submit”按钮并填写了必填字段时,表单将成功提交,并在页面上显示表单数据。如果表单未填写或填写不完整,则无法提交表单。