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

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

实现表单提交后禁用功能

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

1. 禁用表单输入字段

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

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

示例代码:

假设您的表单名为 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):


  
    Distance traveled(km):
    
      
      
      
        距离是必填项，且必须是数字。

通过这种方式，当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: `
    
      表单提交后禁用示例
      
        
          Distance traveled (km):
          
            
            
              距离是必填项。
              请输入有效的数字（最多两位小数）。
            
          
        

        
          
            
          
        
      

      
        表单已成功提交并禁用。
      
    
  `,
  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的状态保存在服务或路由参数中。