Angular表单提交后禁用输入框与按钮的实现教程-html教程-PHP中文网

Angular表单提交后禁用输入框与按钮的实现教程

DDD

发布： 2025-12-02 11:17:42

原创

772人浏览过

Angular表单提交后禁用输入框与按钮的实现教程

本教程详细介绍了如何在angular应用中实现表单提交后，自动禁用所有输入字段并使提交按钮不可用的功能。通过利用`formgroup`的`disable()`方法和组件内部的布尔标志进行属性绑定，可以轻松创建一次性填写、提交后即变为只读状态的表单，从而提高数据完整性和用户体验。

实现表单提交后禁用功能

在许多业务场景中，我们可能需要用户在提交表单后，防止他们再次修改已提交的数据。这通常意味着表单中的所有输入字段应变为不可编辑状态，并且提交按钮也应被禁用，以避免重复提交。Angular的响应式表单提供了一种简洁高效的方式来实现这一需求。

1. 禁用表单输入字段

Angular的FormGroup实例提供了一个非常方便的disable()方法。当在一个FormGroup上调用此方法时，它会自动禁用该组内所有关联的FormControl或嵌套的FormGroup，从而使所有对应的表单元素（如<input>、<textarea>、<select>等）变为不可编辑状态。

要在表单提交后禁用所有输入字段，您只需在处理提交逻辑的方法中调用FormGroup的disable()方法即可。

示例代码:

腾讯Effidit

腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验

查看详情

假设您的表单名为 calculateForm：

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

@Component({
  selector: 'app-form-example',
  templateUrl: './form-example.component.html',
  styleUrls: ['./form-example.component.css']
})
export class FormExampleComponent implements OnInit {
  calculateForm: FormGroup;

  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(); 

      // 其他成功处理，如显示消息、导航等
    } else {
      console.log('表单无效，请检查输入。');
      // 标记所有控件为触碰状态，显示验证错误
      this.calculateForm.markAllAsTouched();
    }
  }
}

登录后复制

在上述calculate()方法中，this.calculateForm.disable()会在表单数据被处理后立即执行，从而将表单中的所有输入字段置为禁用状态。

2. 禁用提交按钮

除了禁用输入字段，通常还需要在提交后禁用提交按钮，以防止用户多次点击。这可以通过Angular的属性绑定（Property Binding）结合一个布尔型变量来实现。

步骤:

声明一个布尔型变量: 在组件类中声明一个布尔型变量，例如 isSubmitted 或 isDisabled，并将其初始值设为 false。
绑定到按钮的 disabled 属性: 在HTML模板中，将这个布尔型变量绑定到按钮的 [disabled] 属性上。
在提交方法中更新变量: 在表单提交成功后，将这个布尔型变量的值设为 true。

示例代码:

组件类 (form-example.component.ts):

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

@Component({
  selector: 'app-form-example',
  templateUrl: './form-example.component.html',
  styleUrls: ['./form-example.component.css']
})
export class FormExampleComponent implements OnInit {
  calculateForm: FormGroup;
  isFormSubmitted: 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.isFormSubmitted = true; // 将变量设为true

      // 模拟异步操作
      // setTimeout(() => {
      //   console.log('数据保存成功！');
      // }, 1000);

    } else {
      console.log('表单无效，请检查输入。');
      this.calculateForm.markAllAsTouched();
    }
  }
}

登录后复制

组件模板 (form-example.component.html):

<form [formGroup]="calculateForm">
  <div class="form-group row">
    <label for="inputFrom" class="col-sm-4">Distance traveled(km):</label>
    <div class="col-sm-4">
      <input type="text" numbersOnly class="form-control form-control-md"
             formControlName="distance">
      <!-- 可以在这里添加验证错误提示 -->
      <div *ngIf="calculateForm.get('distance')?.invalid && calculateForm.get('distance')?.touched" class="text-danger">
        距离是必填项，且必须是数字。
      </div>
    </div>
  </div>

  <div class="form-group row">
    <div class="col-sm-12">
      <!-- 按钮的 disabled 属性绑定到 isFormSubmitted 变量 -->
      <button type="button" 
              (click)="calculate()" 
              class="btn btn-success" 
              [disabled]="isFormSubmitted">
        Save
      </button>
    </div>
  </div>
</form>

登录后复制

通过这种方式，当calculate()方法执行并成功处理表单后，isFormSubmitted变量会变为true，从而使“Save”按钮被禁用。

3. 完整整合示例

将上述两个部分结合，我们可以得到一个完整的、在提交后自动禁用表单和按钮的Angular表单：

app.component.ts (或您的组件文件):

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

@Component({
  selector: 'app-root',
  template: `
    <div class="container mt-5">
      <h3>表单提交后禁用示例</h3>
      <form [formGroup]="calculateForm">
        <div class="form-group row mb-3">
          <label for="distanceInput" class="col-sm-4 col-form-label">Distance traveled (km):</label>
          <div class="col-sm-6">
            <input type="text" id="distanceInput" class="form-control form-control-md"
                   formControlName="distance" appNumbersOnly>
            <div *ngIf="calculateForm.get('distance')?.invalid && calculateForm.get('distance')?.touched" class="text-danger">
              <span *ngIf="calculateForm.get('distance')?.errors?.required">距离是必填项。</span>
              <span *ngIf="calculateForm.get('distance')?.errors?.pattern">请输入有效的数字（最多两位小数）。</span>
            </div>
          </div>
        </div>

        <div class="form-group row">
          <div class="col-sm-10 offset-sm-2">
            <button type="button" 
                    (click)="calculate()" 
                    class="btn btn-success" 
                    [disabled]="isFormSubmitted || calculateForm.invalid">
              Save
            </button>
          </div>
        </div>
      </form>

      <div *ngIf="isFormSubmitted" class="alert alert-info mt-4">
        表单已成功提交并禁用。
      </div>
    </div>
  `,
  styles: [`
    /* 简单的样式 */
    .form-group label {
      font-weight: bold;
    }
  `]
})
export class AppComponent implements OnInit {
  calculateForm: FormGroup;
  isFormSubmitted: 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);

      // 模拟数据保存的异步操作
      setTimeout(() => {
        console.log('数据保存成功！');

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

        // 禁用提交按钮
        this.isFormSubmitted = true; 

        // 可以添加其他成功后的逻辑，如显示成功消息
      }, 1000); // 模拟1秒的网络延迟

    } else {
      console.log('表单无效，请检查输入。');
      // 标记所有控件为触碰状态，以便显示验证错误
      this.calculateForm.markAllAsTouched();
    }
  }
}

// 假设有一个简单的 numbersOnly 指令
// app-numbers-only.directive.ts
// import { Directive, HostListener, ElementRef } from '@angular/core';

// @Directive({
//   selector: '[appNumbersOnly]'
// })
// export class NumbersOnlyDirective {
//   constructor(private _el: ElementRef) { }

//   @HostListener('input', ['$event']) onInputChange(event: any) {
//     const initalValue = this._el.nativeElement.value;
//     this._el.nativeElement.value = initalValue.replace(/[^0-9.]/g, '');
//     if (initalValue !== this._el.nativeElement.value) {
//       event.stopPropagation();
//     }
//   }
// }

登录后复制

注意事项:

用户体验: 禁用表单后，用户会看到输入框变为灰色或不可点击。这是一个明确的视觉反馈，表明数据已提交且不可修改。
重新启用表单: 如果需要提供编辑功能（例如，在查看页面有一个“编辑”按钮），您可以在点击“编辑”按钮时调用this.calculateForm.enable()和this.isFormSubmitted = false;来重新激活表单和按钮。
表单验证: 在禁用按钮时，除了isFormSubmitted，最好也检查calculateForm.invalid，确保在表单内容无效时按钮也处于禁用状态，即使尚未提交。
状态管理: 如果您的应用在页面之间导航，并且希望在用户返回时表单保持禁用状态，您可能需要将isFormSubmitted的状态保存在服务或路由参数中。