Angular10中点击Save按钮后在同页展示Reactive Form数据

1. 组件类逻辑实现 #

在组件中定义响应式表单实例，声明变量存储已保存数据，再分别实现Save和Submit的处理函数：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-your-form',
  templateUrl: './your-form.component.html',
  styleUrls: ['./your-form.component.css']
})
export class YourFormComponent implements OnInit {
  userForm: FormGroup;
  savedFormData: any;

  constructor(private fb: FormBuilder, private http: HttpClient) { }

  ngOnInit(): void {
    // 根据实际业务字段初始化表单
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      phone: ['']
    });
  }

  // Save按钮点击事件：将表单数据存入本地变量
  onSave(): void {
    if (this.userForm.valid) {
      // 用扩展运算符复制表单值，避免直接引用导致后续变更同步
      this.savedFormData = { ...this.userForm.value };
    }
  }

  // Submit按钮点击事件：调用API提交数据
  onSubmit(): void {
    if (this.userForm.valid) {
      // 替换为你的实际API接口地址
      this.http.post('https://your-api-domain.com/submit', this.userForm.value)
        .subscribe({
          next: (res) => {
            console.log('提交成功', res);
            // 可按需添加提交后的逻辑，比如重置表单
            // this.userForm.reset();
          },
          error: (err) => {
            console.error('提交失败', err);
          }
        });
    }
  }
}

2. 模板文件实现 #

构建表单并绑定点击事件，添加已保存数据的展示区块：

<!-- 表单区域 -->
<form [formGroup]="userForm">
  <div>
    <label>姓名:</label>
    <input formControlName="name" type="text">
  </div>
  <div>
    <label>邮箱:</label>
    <input formControlName="email" type="email">
  </div>
  <div>
    <label>电话:</label>
    <input formControlName="phone" type="tel">
  </div>

  <button type="button" (click)="onSave()">Save</button>
  <button type="button" (click)="onSubmit()">Submit</button>
</form>

<!-- 已保存数据展示区块 -->
<div *ngIf="savedFormData" class="saved-data-container">
  <h3>已保存的表单数据</h3>
  <p><strong>姓名:</strong> {{ savedFormData.name }}</p>
  <p><strong>邮箱:</strong> {{ savedFormData.email }}</p>
  <p><strong>电话:</strong> {{ savedFormData.phone || '未填写' }}</p>
</div>

3. 必要模块导入 #

确保在对应模块中导入响应式表单和HTTP模块：

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { YourFormComponent } from './your-form.component';

@NgModule({
  declarations: [YourFormComponent],
  imports: [ReactiveFormsModule, HttpClientModule]
})
export class YourModule { }

额外优化（可选） #

如果需要刷新页面后保留已保存数据，可以结合localStorage：

// 修改onSave函数
onSave(): void {
  if (this.userForm.valid) {
    this.savedFormData = { ...this.userForm.value };
    localStorage.setItem('savedFormData', JSON.stringify(this.savedFormData));
  }
}

// 在ngOnInit中读取本地存储的数据
ngOnInit(): void {
  // 初始化表单...
  const savedData = localStorage.getItem('savedFormData');
  if (savedData) {
    this.savedFormData = JSON.parse(savedData);
    // 可选：将保存的数据回填到表单
    // this.userForm.patchValue(this.savedFormData);
  }
}

内容的提问来源于stack exchange，提问作者Ana