重置 Angular 7 Reactive 验证

2024-06-25

我使用 Angular Reactive 表单作为搜索表单。我希望能够重置表格。我用以下代码做到了这一点:

<button type="reset" (click)="onReset()">
    Reset
</button>

重置方法执行以下操作:

onReset(){
    this.myForm.reset();
    this.myForm.markAsPristine();
    this.myForm.markAsUntouched();
}

这使得所有表单控件为空。但它不会重置表单验证。如果表单无效,我会停用提交按钮。当我第一次使用该表单时,这是有效的。单击重置后,验证不再起作用。提交表单后似乎被取消激活。

我该如何解决这个问题?我在这里缺少什么?


请使用以下代码:

this.myForm.reset()
Object.keys(this.myForm.controls).forEach(key => {
  this.myForm.controls[key].setErrors(null)
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

重置 Angular 7 Reactive 验证 的相关文章

  • 如何检测角度7中的url变化包括参数和查询参数

    我需要检测一个组件中路径参数和查询参数的 url 更改 path category key component CollectionPageComponent 最后的网址将是例如类别 T恤 or 类别 T 恤 页 2我需要根据类别获取所有产
  • ng2-bootstrap 在 Angular 2 中不起作用(“alert”不是已知元素:)

    我已经通过以下方式在运行 Angular 2 0 1 的项目上安装了 ng2 bootstrap npm install ng2 bootstrap save 我已经这样设置我的项目 systemjs config js function
  • 输入属性在 ngx-charts 模板中不起作用

    按照这个answer https stackoverflow com questions 47826641 ngx charts cant load bar charts directly with async pipe in angula
  • 如何在 webpack 2 和 typescript 以及 Angular 2 中使用 tree-shaking?

    我已经用 Angular 设置了 webpack 2 大多数情况下它似乎可以工作 但它似乎并没有做到这一点tree shaking 因为我有一个几乎不执行任何操作的应用程序 并且vendor js仍然是 800 KB 似乎关于如何打开 tr
  • 如何让 Angular2 在渲染组件之前等待承诺

    第一 是的 我事先用谷歌搜索过这个 并且solution https stackoverflow com questions 34731869 wait for angular 2 to load resolve model before
  • 角度文件上传

    我是 Angular 的初学者 我想知道如何创建 Angular 5文件上传部分 我试图找到任何教程或文档 但我在任何地方都没有看到任何内容 有什么想法吗 我尝试过ng4 文件 https github com bonjurmrfirst
  • 并行运行 Angular 和 AngularJS 框架

    我找到了描述如何将 Angular 2 组件集成到 AngularJS 中的资源 但所有这些都涉及像 Angular 项目一样设置 AngularJS 项目 需要 TypeScript 的转译器 需要 ES6 需要 import 语句 我想
  • Angular2 中的 MVW 代表什么?

    我有很多介绍 MVC MVP MVVM 等的链接 但我没有得到一个可以说明 M 在 Angular2 中到底代表什么 V 在 Angular2 中到底代表什么以及 W 在 Angular2 中到底代表什么的信息 也许W有一个答案 那就是W代
  • Angular 2 中的 Amcharts 点击事件不起作用

    这是我的代码库 export class myComponent implements OnInit minHist maxHist public callAmcharts whichFilterType String this amcha
  • 聚合物纸下拉菜单在浏览器中未正确呈现

    我对简单的纸张下拉菜单的渲染 html 遇到问题 列表项并不显示为样式化的 菜单 而只是出现在页面上的项目列表 单击渲染的纸张输入组件 渲染的下拉列表的一部分 确实会为波纹设置动画 但不会为菜单和菜单项的显示 隐藏设置动画 单击列表中的某个
  • 如何使用 Angular 2 实现拖放(v2.0.0-beta.15)

    我想以角度实现一个简单的拖放列表 例如我可以更改其顺序的杂货列表 iv 在使用之前实现它https github com akserg ng2 dnd https github com akserg ng2 dnd但我的问题是我使用角度2
  • Django 表单:时间字段验证

    我觉得我在这里遗漏了一些明显的东西 我有一个 Django 表单 其中包含时间场 http docs djangoproject com en dev ref forms fields timefield在上面 我希望能够允许像 10 30
  • 如何使用 angular2 反应形式构建嵌套数组?

    I have an array like PermissionRoleModule id 1 legend businessModule group PermissionRoleGroup id 1 permission controleT
  • 无法从innerHTML获取动态数据 - Angular

    我从我的视图或 HTML 中获取动态数据并将其放置在我的页面上 以便我可以查看所述数据的打印结果 我必须使用此方法 因为我正在使用此动态数据创建自己的打印页面 我使用的方法获取第一个初始值 而不是最新更新的 DOM 如果删除 innerHT
  • Angular 为多个根路径重用相同的延迟加载模块

    我将我的应用程序分成两个模块 一个具有主要的基本功能 另一个具有较少使用的功能 例如帐户设置 常见问题解答页面等 我想要完成的是延迟加载某些根路由路径的第二个模块 例如 account or settings无需创建许多不同的模块 据我所知
  • 如何获取 Angular2 中元素的当前位置信息

    我有ElementRef我的导航栏 我试图找出它离我的窗口顶部有多近 这样我就可以让它粘起来 div class nav bar div ViewChild navBar navBarElement 我正在滚动事件中打印出它的 native
  • Firebase 托管上的 Angular 9 项目无法传递 https 请求

    我在我的角度项目上使用了代理 如下所示 api target https
  • 对 Angular 2 应用进行版本控制

    如何标记 Angular 2 应用程序的版本 有一些问题 例如视图 通过templateUrl 在路线视图 子组件 中没有更新 我尝试过类似的事情
  • 当元素位于模态内部时,Angular ViewChildren 不起作用

    当模板引用变量放置在模态中时 因此最初未定义 我无法使用 ViewChildren 访问模板引用变量 即使在将模态插入到 DOM 中之后 元素的 QueryList 的长度仍然为零 我尝试注入 ChangeDetectorRef 然后使用
  • Angular2模板参考变量和动态更新

    我最初试图在 Angular2 中设置一个模板引用变量 这样我就可以反转表的排序顺序 而不必进行绑定 但当我单击复选框时 我没有得到界面的动态更新 我创建了一个简单的 plunker 以防应用程序中的其他内容可能会扰乱代码 并且我看不到正在

随机推荐