# Angular Reactive 表单：重置状态与保留提交值
Angular 中的响应式表单是构建强大、动态且易于维护的用户界面的重要工具之一。在实际应用中，我们经常会面临需要在提交表单后保留输入值的情况，同时确保表单状态得到正确重置。本文将介绍如何使用 Angular 响应式表单，达到在提交后保留输入值的效果，并同时重置表单状态。## Angular 响应式表单基础在开始之前，让我们简要回顾一下 Angular 响应式表单的基础知识。Angular 响应式表单通过 `FormGroup` 和 `FormControl` 来管理表单的状态和值。`FormGroup` 表示整个表单，而 `FormControl` 则代表表单中的单个控件。typescriptimport { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup, Validators } from '@angular/forms';@Component({ selector: 'app-my-form', templateUrl: './my-form.component.html', styleUrls: ['./my-form.component.css']})export class MyFormComponent implements OnInit { myForm: FormGroup; constructor(private fb: FormBuilder) { } ngOnInit() { this.myForm = this.fb.group({ username: ['', Validators.required], email: ['', [Validators.required, Validators.email]], // 其他表单控件... }); }}在上述示例中，我们创建了一个包含用户名和电子邮件的简单表单。接下来，我们将深入研究如何在提交表单后保留输入值，并同时重置表单状态。## 保留提交值与重置状态通常，我们会在提交表单时处理表单的状态和输入值。为了在提交后保留输入值，我们可以使用 `patchValue` 方法将之前提交的值重新应用到表单中。同时，我们使用 `reset` 方法来重置表单状态。typescriptonSubmit() { // 假设在此处进行表单提交操作 // 保存输入值 const formValue = this.myForm.value; // 重置表单状态 this.myForm.reset(); // 将之前保存的输入值应用回表单 this.myForm.patchValue(formValue);}在上述代码中，`onSubmit` 方法首先保存表单的当前值，然后通过 `reset` 方法重置表单状态。最后，使用 `patchValue` 方法将之前保存的输入值重新应用到表单中。这样，即使表单状态被重置，但用户输入的值仍然保留在表单中。## 实例演示为了更清晰地理解这个过程，让我们创建一个简单的 Angular 组件，演示在提交后保留输入值的效果。typescriptimport { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup, Validators } from '@angular/forms';@Component({ selector: 'app-my-form', templateUrl: './my-form.component.html', styleUrls: ['./my-form.component.css']})export class MyFormComponent implements OnInit { myForm: FormGroup; constructor(private fb: FormBuilder) { } ngOnInit() { this.myForm = this.fb.group({ username: ['', Validators.required], email: ['', [Validators.required, Validators.email]], }); } onSubmit() { // 模拟表单提交操作 console.log('Form submitted!'); // 保存输入值 const formValue = this.myForm.value; // 重置表单状态 this.myForm.reset(); // 将之前保存的输入值应用回表单 this.myForm.patchValue(formValue); }}在上述代码中，我们创建了一个简单的表单，包含用户名和电子邮件。在 `onSubmit` 方法中，我们模拟了表单的提交操作，并通过重置和重新应用值的方式实现了在提交后保留输入值的效果。通过这种方法，我们可以确保用户在提交表单后，即使表单状态被重置，其输入值仍然得以保留。这为用户提供了更好的使用体验，同时保持了应用的可维护性。希望这篇文章对你在使用 Angular 响应式表单时有所帮助。