首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用ngIf错误时如何在angular 6中禁用按钮保存

在Angular 6中,可以使用ngIf指令来根据条件动态显示或隐藏元素。当使用ngIf时,如果条件为false,则元素将被从DOM中移除,如果条件为true,则元素将被添加到DOM中。

要在Angular 6中禁用保存按钮,可以使用ngIf指令来根据错误状态动态显示或隐藏按钮。以下是一个示例:

首先,在组件的HTML模板中,添加一个保存按钮,并使用ngIf指令根据错误状态来决定是否显示按钮:

代码语言:txt
复制
<button (click)="save()" [disabled]="hasError">保存</button>

在上面的代码中,[disabled]="hasError"表示如果hasError为true,则按钮将被禁用。

接下来,在组件的TypeScript代码中,定义一个变量来表示错误状态,并在保存方法中根据条件来更新该变量:

代码语言:txt
复制
export class YourComponent {
  hasError: boolean = false;

  save() {
    // 检查错误条件
    if (/* 错误条件 */) {
      this.hasError = true;
      return;
    }

    // 执行保存操作
    // ...
  }
}

在上面的代码中,如果存在错误条件,则将hasError设置为true,按钮将被禁用。

这样,当错误条件满足时,保存按钮将被禁用,用户无法点击保存按钮执行保存操作。

关于Angular 6的更多信息,您可以参考腾讯云的Angular产品介绍页面:Angular产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

一、Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验。...从入坑到弃坑 - Angular 使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 三、Knowledge Graph ?...name 属性则是 angular 用来注册控件的 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单中使用 ngModel...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性上,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...在模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K20

AngularDart4.0 指南- 模板语法二 顶

使用HTML表单元素(和)的双向绑定会很方便。 但是,没有原生HTML元素遵循x值和xChange事件模式。...NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中的元素。 在此示例中,将指令绑定到条件表达式,isActive。...例如,TypeScript Angular程序通常具有诸如* ngIf =“currentHero”的代码,其中Dart程序具有诸如* ngIf =“currentHero!...警惕隐藏大型组件树; NgIf可能是更安全的选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用的。 如果嵌套表达式试图访问null属性,Angular会抛出一个错误。...但是NgForm指令有,它解释了如果heroForm.form.valid无效并且将整个表单控件树传递给父组件的onSubmit方法,您可以禁用提交按钮

29.9K20

Angular核心概念:数据绑定

-- JSON字符串序列化不可以JSON字符串:{{JSON.stringify({})}} (2)属性绑定 形式1:直接在属性上用{{}}现在有的版本禁用 直接在属性上使用 形式2:直接使用[]推荐 注意:属性绑定通常赋值为变量,如果赋值为常量(字符串常量必须用引号括起来,<img [src]=“‘…/…/assets/...选择绑定:ngIf 说明:如果布尔表达式为false,则当前元素从DOM树上删除。...DOM树结构,必须使用开头,ngFor,*ngIf 3.属性型指令:不会影响DOM树结构,只是影响元素外观或行为,必须用[]括起来, :[ngClass],[ngStyle] <container-element...ngModel指令在FormsModule模块中,使用之前必须添加 在app.module.ts主模块中导入模块 import {FormsModule} from'@angular/forms'

3.5K10

深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮

除了每天我都要浏览的 Angular 官网之外,我也经常阅读一些国内外大神写的关于 Angular 源代码分析的博客。 ?...同 Angular 相比,使用 SAP Fiori Elements 的从业者的绝对人数没有 Angular 多,除了 SAP 官网文档之外,介绍 Fiori Elements 源代码实现和工作原理的文章不多...而红色的按钮则是我通过 Fiori Elements 应用增强的方式绘制出来的。 ? 本文我们会分享:如何在 SAP Fiori Elements 表格控件的工具栏里,添加新的自定义按钮。...本系列后续文章,Jerry 会介绍,如何在自定义按钮的点击事件处理函数里,用代码取得当前选中行项目的明细信息。...其效果和使用方式,和 Angular 里的结构型指令 ngIf 非常类似。

2.5K10

Angular快速学习笔记(3) -- 组件与模板

使用插值表达式,就把属性名包裹在双花括号里放进视图模板, {{myHero}}。...它是语法中不可或缺的一部分 通过 NgIf 进行条件显示 有时,应用需要只在特定情况下显示视图或视图的一部分,这个时候使用ngif,同vue.js里的v-if 元素,它被禁用了,以阻止脚本注入攻击的风险。(实际上, 只是被忽略了。) ### 插值表达式 ( {{...}})...并把它设置为组件的 isUnchanged 属性的当前值,但你的直觉是的!isUnchanged为true时,button增加disabled属性。...事件绑定 可以通过 Angular 事件绑定来声明对哪些用户动作感兴趣 圆括号中的名称 —— 比如 (click) —— 标记出目标事件。在下面例子中,目标是按钮的 click 事件。

15.2K30

【Appetite】ionic3实录(六)首页实现

步骤如下: 一、准备素材: 鸡蛋两只,油两茶匙……呃,说,应该是这些: 食物照片; 人物头像; 视频封面; 视频; 这些可以上素材网下,也可以简单点找度娘(不过小心图片版权问题): ?...百度食物图片 如果是远程地址则先保存地址,如果是放本地的就在src/assets里面找个地方放,呆会要把地址作为数据一部分,我这选择存放本地。.../core'; import { NavController } from 'ionic-angular'; import { HomeProvider } from '../.....this.frendNews = res.result; this.cd.detectChanges(); this.initSwiper(); }else{ //提示框等错误提示...用了结构指令ngIf来选择显示视频还是画廊;按钮组可以换用grid布局;此外,为了性能考虑,应用virtualScroll,但我简单一用时布局有变形,赶时间没分析,换用现在方式。

1.1K40

AngularDart 4.0 高级-结构指令 顶

你已经看到了NgIfngIf。 有一个原因。 NgIf指向指令类; ngIf引用指令的属性(attribute)名称。 指令类拼写使用UpperCamelCase(NgIf)。...该组件的以前的状态被保存并准备显示。 该组件不会重新初始化 - 这种操作可能很昂贵。 所以隐藏和展示有时候是正确的。...模板来解决 Angular 是一个分组元素,不会干扰样式或布局,因为Angular不会将其放入DOM中。 以下是条件段落,这次使用。...指令属性名称应使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于Angular。 选择适合您或您公司的简短内容。 在这个例子中,前缀是my。...在没有合适的宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

16K20

Angular--Module的使用

NgModule 可以将其组件和一组相关代码(服务)关联起来,形成功能单元。...imports(导入表) —— 其他模块,本NgModule声明的组件需要使用它们的导出类。 providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。...@NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。...app 时 CommonModule @angular/common 当你想要使用NgIf 和NgFor时 FormsModule @angular/forms 当要构建模板驱动表单时 ReactiveFormsModule...@angular/forms 当要构建响应式表单时 RouterModule @angular/router 当要使用路由功能,并且你要用到RouterLink, forRoot() 和.forChild

4.9K40

AngularDart4.0 指南-体系结构概述 顶

主要的Angular库是angular,大多数app模块导入如下: import 'package:angular/angular.dart'; Angular包有其他重要的库,angular.security...= null" [hero]="selectedHero"> 虽然这个模板使用了典型的HTML元素,和,但它也有一些不同之处。...注意是如何在原生HTML元素中合适的存放。 自定义组件与原生HTML在相同的布局中无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。...出于这个原因,这个应用程序的JavaScript和TypeScript版本可以使用selectedHero作为* ngIf表达式的值。 Dart版本必须使用布尔运算符!=替换。...HTTP:与服务器通信以获取数据,保存数据并使用HTTP客户端调用服务器端操作。 Lifecycle hooks:通过实现生命周期钩子接口,触及组件生命周期中的关键时刻,从创建到销毁。

7.9K30

AngularDart4.0 指南- 表单 顶

使用ngSubmit处理表单提交。 禁用窗体的提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单的新项目。...您在底部添加了一个提交按钮,其中有一些类用于样式。 你还没有使用Angular。 没有绑定或额外的指令,只是布局。...这说明有些事情是的,但用户不知道什么是的,或者该怎么做。 利用控件的状态来显示有用的消息。 使用有效的和原始的状态 当用户删除名称时,表单应该如下所示: ?...你会发现这个按钮是启用的,尽管它没有做任何有用的事情。 现在,如果您删除Name,则违反了“必需的”规则,这在错误消息中正确记录。 提交按钮也被禁用。 没有留下深刻印象? 想一想。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。

17.4K30

AngularDart 4.0 高级-生命周期钩子 顶

DoCheck 使用自定义更改检测实现ngDoCheck方法。 看看Angular多久会调用这个钩子,并在更改日志后观察它。 AfterView 通过视图显示Angular的意图。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志的状态。 ?...重置按钮清除英雄列表。 Angular从DOM中移除所有英雄元素并同时销毁他们的间谍指令。 间谍的ngOnDestroy方法报告其最后时刻。...英雄对象引用没有改变,所以从Angular的角度来看,没有改变的反馈! DoCheck 使用DoCheck钩子来检测并处理Angular自己无法捕获的更改。...使用此方法检测Angular忽略的更改。

6.1K10

AngularDart4.0 英雄之旅-教程-07路由 顶

添加路由 应该在用户点击按钮后显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...要在另一个包中使用资源,请使用完整的包引用,“package:some_other_package / dashboard_component.html”。...在构造函数中注入HeroService,并将其保存在一个专用的_heroService字段中。 调用服务来获取Angular ngOnInit()生命周期钩子中的英雄。.../angular_router.dart'; import 'hero_service.dart'; 将RouteParams,HeroService和Location服务注入到构造函数中,并将其值保存在私有字段中...您将使用绑定到后退按钮的事件连接此方法,您将添加到组件模板。

17.5K30

Angular2 VS Angular4 深度对比:特性、性能

在这些浏览器上构建应用,意味着可以更容易的使用Angular进行开发和优化,从而允许开发人员更专注于公司业务实现的代码。...依赖注入在模块化开发和元素隔离方面非常有帮助,但它的实现一直受到Angular 1.x的困扰。Angular2解决了这个问题,另外还添加了一些缺少的功能,子注入以及生命周期/范围控制。...改进 *ngIf 和 *ngFor: 模板绑定语法目前支持一些少量有帮助的更改。现在,开发人员已经可以使用if/else设计​​语法,并分配局部变量了。...模板的源映射: 每当模板中的某些内容出现错误时,都将创建源映射,为原始模板提供有意义的说明内容。 结论: 对于仍处于学习阶段的人来说,Angular会有点混乱。...但对于具有Angular2知识的有经验的开发人员来说,会觉得Angular很容易使用,并且使用Angular对项目非常有帮助。

8.7K20
领券