Angular 6模板驱动表单-禁用编辑表单上的提交按钮

Angular 6模板驱动表单是一种基于模板的表单开发方式，它允许开发者通过在模板中定义表单控件和验证规则来创建表单。禁用编辑表单上的提交按钮是一种常见的需求，可以通过以下步骤实现：

1. 在组件类中引入FormsModule：在使用模板驱动表单之前，需要在组件类中引入FormsModule模块。可以通过在组件类的import语句中添加FormsModule来实现。

import { FormsModule } from '@angular/forms';

1. 在模板中定义表单：在模板中使用ngForm指令来定义表单，并使用ngModel指令来绑定表单控件的值。

<form #myForm="ngForm">
  <input type="text" name="name" [(ngModel)]="name" required>
  <button type="submit" [disabled]="!myForm.valid">提交</button>
</form>

1. 禁用提交按钮：通过给提交按钮的disabled属性绑定一个表达式来实现禁用按钮的功能。在这个例子中，使用了myForm.valid来判断表单是否有效，如果表单无效，则禁用提交按钮。
2. 处理表单提交事件：在组件类中定义一个方法来处理表单的提交事件。可以通过在表单元素上添加ngSubmit指令，并绑定一个方法来实现。

<form #myForm="ngForm" (ngSubmit)="onSubmit()">
  <!-- 表单控件 -->
  <button type="submit" [disabled]="!myForm.valid">提交</button>
</form>

onSubmit() {
  // 处理表单提交逻辑
}

这样，当表单中的输入控件满足验证规则时，提交按钮将可用，否则将被禁用。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。

• 腾讯云云服务器（CVM）：提供可扩展的计算能力，适用于各种规模的应用程序和工作负载。了解更多信息，请访问腾讯云云服务器（CVM）产品介绍。
• 腾讯云云数据库MySQL：提供高性能、可扩展的MySQL数据库服务，适用于各种规模的应用程序。了解更多信息，请访问腾讯云云数据库MySQL产品介绍。