Angular响应式表单提交后禁用编辑：实现表单与按钮的只读模式

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  calculateForm!: FormGroup;
  isFormDisabled: boolean = false; // 用于控制按钮禁用状态的标志

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.calculateForm = this.fb.group({
      distance: ['', [Validators.required, Validators.pattern(/^\d+(\.\d{1,2})?$/)]] // 距离输入，带验证
    });
  }

  calculate(): void {
    // 实际的保存或计算逻辑将在这里执行
    if (this.calculateForm.valid) {
      console.log('表单已提交，数据：', this.calculateForm.value);

      // 禁用整个表单
      this.calculateForm.disable();

      // 禁用保存按钮
      this.isFormDisabled = true;

      alert('表单已保存并禁用！');
    } else {
      console.log('表单无效，请检查输入。');
      // 可以在这里添加错误提示逻辑
    }
  }
}

<div class="container mt-5">
  <h2>距离计算器</h2>
  <form [formGroup]="calculateForm">
    <div class="form-group row mb-3">
      <label for="inputFrom" class="col-sm-4 col-form-label">行驶距离 (km):</label>
      <div class="col-sm-4">
        <input
          type="text"
          class="form-control form-control-md"
          formControlName="distance"
          numbersOnly <!-- 假设您有一个numbersOnly指令来限制输入 -->
        >
        <div *ngIf="calculateForm.get('distance')?.invalid && calculateForm.get('distance')?.touched" class="text-danger">
          <div *ngIf="calculateForm.get('distance')?.errors?.['required']">
            距离是必填项。
          </div>
          <div *ngIf="calculateForm.get('distance')?.errors?.['pattern']">
            请输入有效的数字，最多两位小数。
          </div>
        </div>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-8 offset-sm-4">
        <button
          type="button"
          (click)="calculate()"
          [disabled]="isFormDisabled || calculateForm.invalid" <!-- 按钮在表单无效或已禁用时也禁用 -->
          class="btn btn-success"
        >
          保存
        </button>
      </div>
    </div>
  </form>
</div>