ANGULAR - 如果表单值未更改，则禁用提交按钮_编程开发

ANGULAR - 如果表单值未更改，则禁用提交按钮

创始人

2024-10-14 20:31:49

0次

在Angular中，可以使用form.dirty属性来判断表单是否发生了更改。根据form.dirty属性的值，可以禁用或启用提交按钮。

下面是一个示例代码：

在这个示例中，我们给表单添加了一个模板引用变量myForm，然后通过[(ngModel)]指令将表单控件与组件中的属性绑定。

[disabled]="!myForm.dirty"这一行代码使用了模板表达式，如果表单没有发生更改，则禁用提交按钮。

在组件中，你需要定义name和email属性来与表单控件绑定：

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  name: string;
  email: string;
}

在这个示例中，如果用户修改了表单中的任何字段，myForm.dirty属性将变为true，因此提交按钮将启用。如果表单没有发生更改，myForm.dirty属性将为false，提交按钮将被禁用。

希望这个示例能帮助你解决问题！

上一篇：Angular - 如果表单块处于焦点状态，则显示输入框

下一篇：Angular - 如果后续请求失败，则取消先前的HTTP请求

ANGULAR - 如果表单值未更改，则禁用提交按钮

相关内容

热门资讯