在模板驱动的表单Angular 12中,要将表数据重置为编辑之前的状态,可以使用Angular的ReactiveFormsModule中提供的reset()方法。
具体步骤如下:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
// 定义表单控件
});
}
resetForm() {
this.form.reset(); // 重置表单数据
}
}
<form [formGroup]="form">
<!-- 表单控件的HTML代码 -->
<button type="button" (click)="resetForm()">重置</button>
</form>
这样,当点击重置按钮时,表单数据将会被重置为编辑之前的状态。
在Angular中,使用模板驱动的表单可以方便地进行表单数据的绑定和验证。Angular提供了丰富的表单控件和验证器,可以满足各种复杂的表单需求。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云数据库MySQL版、腾讯云对象存储(COS)等。你可以通过访问腾讯云官网(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。
领取专属 10元无门槛券
手把手带您无忧上云