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

为什么ngForm的submitted属性在submit事件后仍然是false?

ngForm是Angular框架中的一个指令,用于管理表单并提供一些便利的功能。ngForm的submitted属性用于表示表单是否已经提交过。

当我们在Angular中使用ngForm指令包裹表单元素时,可以通过监听表单的submit事件来判断表单是否被提交。通常情况下,当用户点击提交按钮时,表单会触发submit事件,并在事件处理函数中执行相关的提交逻辑。

然而,在表单的submit事件中,ngForm的submitted属性并不会立即变为true。这是因为Angular的变更检测机制导致的,在事件处理函数中,Angular会先执行事件处理逻辑,然后再进行变更检测,最后更新组件的视图。

因此,即使在submit事件中我们修改了ngForm的submitted属性的值为true,但在事件处理函数执行完毕后,Angular的变更检测会将submitted属性的值重新设置为false。这就是为什么ngForm的submitted属性在submit事件后仍然是false的原因。

解决这个问题的方法是,在事件处理函数中,使用setTimeout()函数来延迟修改submitted属性的值。这样可以确保在变更检测阶段之后再修改submitted属性的值,从而使它保持为true。

示例代码如下:

代码语言:txt
复制
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  @ViewChild('myForm') form!: NgForm;
  submitted = false;

  onSubmit() {
    // 执行提交逻辑

    setTimeout(() => {
      this.submitted = true;
    });
  }
}

在上述示例代码中,我们通过@ViewChild装饰器获取了ngForm的引用,并在表单的submit事件处理函数中使用setTimeout()函数来延迟修改submitted属性的值为true。

注意:这里只是提供了一种解决方法,并不是说ngForm的submitted属性必须在submit事件之后立即变为true。实际应用中,我们可以根据具体需求来判断何时将submitted属性设置为true,这取决于我们对表单提交时机的定义。

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

相关·内容

AngularDart4.0 指南- 表单 顶

你知道如何从早期的页面做到这一点。 显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听和提取。...为什么“ngForm”? 指令的exportAs属性告诉Angular如何将引用变量链接到指令。...用ngSubmit提交表单 用户应该能够在填写表单后提交这个表单。表单底部的Submit按钮本身不做任何事情,但是由于它的类型(type =“submit”),它会触发一个表单提交。...)="onSubmit()" #heroForm="ngForm"> 该表单从一开始就是可见的,因为在提交表单之前,提交的属性为false,因为HeroFormComponent...中的片段显示为:lib/src/hero_form_component.dart (submitted) bool submitted = false; void onSubmit() => submitted

17.5K30
  • angularjs学习第四天笔记(第一篇:简单的表单验证)

    --type="number"     7.网页地址:url,使用直接给文本框的type属性值赋值为url即可--type="url"   第四、表单中的控制变量     1.表单的属性值访问方式为:...表单名称.文本框名称.属性名称     2.表单验证中用到的表单属性包括如下:       未修改的表单:属性名称关键词【pristine】,bool类型,如果为修改为ture       用户修改过的表单...】,bool类型,只要有不合法的都为true       错误:属性关键词【error】,bool类型,只要有不合法的都为true   第五、简单实现注册页面的表单验证     在实现的方式上,根据不同的体验...,在统一对表单数据验证,只有同验证通过才提交数据到后台处理        实现方式:可以给表单添加一个属性,初始化赋值为false,只有提交后才赋值为ture             验证结果提示信息,...= true; } } }); 其三、失去焦点后验证     时间不早了,明天在仔细研究该问题 今天就到此为止,明天继续研究表单验证

    1.7K10

    angularjs学习第四天笔记(第一篇:简单的表单验证)

    --type="number"     7.网页地址:url,使用直接给文本框的type属性值赋值为url即可--type="url"   第四、表单中的控制变量     1.表单的属性值访问方式为:...表单名称.文本框名称.属性名称     2.表单验证中用到的表单属性包括如下:       未修改的表单:属性名称关键词【pristine】,bool类型,如果为修改为ture       用户修改过的表单...】,bool类型,只要有不合法的都为true       错误:属性关键词【error】,bool类型,只要有不合法的都为true   第五、简单实现注册页面的表单验证     在实现的方式上,根据不同的体验...,在统一对表单数据验证,只有同验证通过才提交数据到后台处理        实现方式:可以给表单添加一个属性,初始化赋值为false,只有提交后才赋值为ture             验证结果提示信息,...= true; } } }); 其三、失去焦点后验证     时间不早了,明天在仔细研究该问题 今天就到此为止,明天继续研究表单验证

    1.3K20

    Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

    ---- 模板驱动 模板驱动:主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单的那的值亦或者校验 一个最简单的例子...--$event是原生dom对象--> ngForm" (ngSubmit)="Submit(testform.value,testform.valid)"> submitted)"> 您输入的值有误,请重新输入 submit" >提交 复制代码 有两种方式处理来对上面的表单做校验...; 在Submit()函数内,在点击提交的时候对整个表单一一去判断,传统方式基本这样 每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验 ---- 数据驱动...}, (err) => { this.showLoading = false; }); } ngOnDestroy() { if (this.login_subscribe

    3.8K20

    Angularjs的表单验证

    $error 如果验证失败,则此属性将是true的(因为length>0)。 控制验证时的样式 当AngularJS处理的验证时,它将根据验证的状态增加一些特定的class属性。...点击提交后显示验证信息 要在用户试图提交表单时显示的验证,你可以通过在scope中设置一个'submitted'值,并检查该值来控制显示错误。 让我们来看看第一个例子,只有在点击提交表单时才显示错误。..." class="button radius">Submit 现在,那个错误信息只将在signup_form.submitted为true时才显示...$valid) { // Submit as normal } else { $scope.signup_form.submitted = true; } }...将在输入框的blur和focus事件中注册相应操作,当焦点在该输入框时,它添加一个class(ng-focused),并且该输入框的$focused属性也将变为true。

    2.2K10

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

    在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单中使用 ngModel...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性上,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...,一个 FormControl 类的实例对应于一个表单控件,在使用时,通过将控件的实例赋值给属性,后续则可以通过监听这个自定义的属性来跟踪表单控件的值和状态 import { Component, OnInit...{ 'nameInvalid': true } : null; } } 当实现了继承的 validate 方法后,就可以在模板的控件上添加该指令

    18.9K20

    angularjs输入验证

    为了访问这个属性,使用下面的语法: formName.inputfieldName.$error 如果验证失败,则此属性将是true的,而如果它是false的,那么该值通过验证的。...点击提交后显示验证信息 要在用户试图提交表单时显示的验证,你可以通过在scope中设置一个’submitted’值,并检查该值来控制显示错误。..." class="button radius">Submit 现在,那个错误信息的div只将在 signup_form.submitted...$valid) { // Submit as normal } else { $scope.signup_form.submitted = true; } } }]); 现在,当用户尝试提交表单并且同时有一个无效的元素时...将在输入框的blur和focus事件中注册相应操作,当焦点在该输入框时,它添加一个class(ng-focused),并且该输入框的$focused属性也将变为true。

    1.3K30

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

    如果名称未能匹配已知指令的元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 在事件绑定中,Angular为目标事件设置了一个事件处理程序。...[()] =香蕉盒 在一个盒子里形象化一个香蕉,记住圆括号在括号内。 当元素有一个名为x的可设置属性和一个名为xChange的对应事件时,[(x)]语法很容易演示。...修改后的size值流向样式绑定,使显示的文本变大或变小。 双向绑定语法实际上只是属性(property)绑定和事件绑定的语法糖。...在Angular中你不需要这些指令。 通常,您可以使用功能更强大,表现力更强的Angular绑定系统获得相同的结果。 当你可以写一个简单的绑定时为什么要创建一个指令来处理点击呢?...当表达式为false时,NgIf从DOM中删除HeroDetailComponent,销毁该组件及其所有子组件。 在Dart模式下,Dart期望布尔值(类型为bool的)为true或false。

    30K20

    riot.js教程【五】标签嵌套、命名元素、事件、标签条件

    方法传递的,子标签的参数是通过标签属性传递过去的 注意:嵌套的标签总是在父标签内部声明,定义; 标签内嵌入HTML 我们先定义一个my-tag标签 Hello 的,其实是text变量 这就是在标签内嵌入HTML代码 命名元素 当元素具备ref属性的时候, 这个元素会被链接到this.refs上, 这样你就可以很方便的用JS访问到它 <login...} 注意,这个指向的操作,是在mount事件被触发前完成的,所以你可以在mount事件中访问到this.refs 事件 DOM事件可以直接和riotjs标签内的方法绑定,示例如下...: submit }> // this method is called when above form is submitted...,相当于 style="display: none" if – 当值是true的时候,会把该标签加入到DOM元素中,是false的时候,不会把标签加入到dom元素中

    3.9K80

    Angular系列教程-第四节

    两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...,FormBuilder 等类构建出的数据对象就是响应式的表单,在响应式的表单中,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...)]来将表单的数据和和视图进行双向绑定,NgForm 指令为 form 增补了一些额外特性。...它会控制那些带有 ngModel 指令和 name 属性的元素,监听他们的属性。

    2.8K50

    Angular2 :从 beta 到 release4.0 版本升级总结

    ="url" [(ngModel)]="url" [ngModelOptions]="{standalone: true}" /> 若要在[ngFormModel]属性的内使用#url="ngForm...组件迁移后,无法正确订阅事件 原因:angular(v4.0.0)中依赖注入,若在不同地方声明provider,则会创建不同的实例。...升级angular-cli版本失败 原因:angular-cli版本升级后,对应webpack版本修改了默认的disableHostCheck属性,导致ng serve --port会出现Invalid...升级angular(v2.4.0)到(v4.1.1)版本后,左侧导航的状态定位失效 原因:升级后,router和component的hook顺序调整(仅根据个人观察,未经验证),导致组件状态未能在路由事件结束...解决办法:目前在路由事件结束(NavigationEnd)时,手动更新组件状态。 的内嵌样式失效。"

    8.2K00
    领券