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

Angular 2当我提交表单时,数据是空的

Angular 2是一种流行的前端开发框架,用于构建单页应用程序。当您提交表单时,数据为空可能有以下几个原因:

  1. 表单绑定错误:请确保您正确地将表单控件与组件中的属性绑定。检查表单控件的名称、ngModel指令和组件中的属性名是否匹配。
  2. 表单验证失败:如果您在表单控件上应用了验证规则,例如必填字段或特定格式要求,但未满足这些规则,那么表单提交时数据将为空。请检查表单控件的验证规则是否正确,并确保满足这些规则。
  3. 表单提交逻辑错误:在提交表单时,您可能有自定义的提交逻辑,例如通过HTTP请求将数据发送到服务器。请确保您在提交表单时正确地处理数据,并将其发送到服务器。

针对Angular 2中提交表单时数据为空的问题,您可以参考以下步骤进行排查和解决:

  1. 检查表单绑定:确保表单控件与组件中的属性正确绑定,包括名称、ngModel指令和属性名。
  2. 检查表单验证规则:如果应用了验证规则,请确保满足这些规则。可以使用Angular的内置验证器或自定义验证器来验证表单控件的值。
  3. 检查提交逻辑:如果有自定义的提交逻辑,请确保在提交表单时正确地处理数据,并将其发送到服务器。

如果您需要更详细的帮助或示例代码,可以参考腾讯云的Angular开发文档和相关产品:

请注意,以上答案仅供参考,具体解决方法可能因您的具体情况而异。

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

相关·内容

PhpStorm表单提交获取不到post数据解决方法

解决PhpStorm表单提交获取不到post数据问题,将apache服务器目录映射到本地目录,更改PhpStorm配置,实现其直接调用本地服务器打开浏览器调试程序,解决Apache/2.4.23 (Win64...2.观察你运行php浏览器地址,会发现在PhpStorm中打开浏览器使用服务端口号63342(URLlocalhost:63342/这样形式) 问题原因在于:PhpStorm默认使用自带内部服务器...实现其直接调用本地服务器打开浏览器调试程序: a.在PhpStorm中,找到菜单栏File(文件)->Settings(设置)->Build, Execution, Deployment->Deployment,初始...此时从PhpStorm中点击浏览器,访问URL已经没有了63342端口这个字段,而是使用了本地Apache服务器,相应表单数据也可以正常接收了。...参考资料: 1.知乎:木子林夕回答 2.HolyNova博文:Apache HTTP 服务器目录映射到本地目录 声明:本文由w3h5原创,转载请注明出处:《PhpStorm表单提交获取不到post

2K00

Struts2(二)---将页面表单数据提交给Action

struts2中,表单想Action传递参数方式有两种,并且这两种传参方式都是struts2默认实现,他们分别是基本属性注入、域模型注入、其中 ---基本属性注入,表单数据项分别传入给Action...---域模型注入,表单数据项打包传入给Action中一个实体对象。 我们继续使用项目Struts2hello Struts实例,在其基础上使用这2中方式完成页面向Action参数传递。...具体我们可以在项目首页index.jsp上追加表单,并在表单中模拟一些数据,将这些数据提交给HelloAction,最后在HelloAction中将接受参数输出到控制台。...具体实现步骤: 1>基本属性注入 步骤一: 在Struts2Day01项目的index.jsp中,追加表单,并将该表单设置提交给HelloAction,即将formaction属性设置为:“/Struts2Day01...控制台输出顺序可以证明代码执行顺序:实例化Action--->调用set方法注入参数-->调用业务方法,当然这个过程Struts2API自行实现,我们只需要在写代码满足上述步骤中要求即可。

62710
  • laravel-admin表单提交隐藏一些数据,回调获取数据方法

    表单提交隐藏数据 读取最后一条插入数据,但这样会造成如果两条数据同时插入,会并发出现错误 //忽略掉不需要保存字段 $form- ignore(['column1', 'column2', 'column3...']); 回调获取数据 获取提交数据 // 在表单提交前调用 $form- submitted(function (Form $form) { //... }); //保存前回调 $form- saving...id数值 $form- saved(function (Form $form) { $form- model()- id; }); 获取隐藏提交数据 所有的数据可以通过request直接获取...}); //保存后回调 $form- saved(function (Form $form) { $type=\request('dbstation'); }); 以上这篇laravel-admin表单提交隐藏一些数据...,回调获取数据方法就是小编分享给大家全部内容了,希望能给大家一个参考。

    2.2K31

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

    一、Overview angular 入坑记录笔记第三篇,介绍 angular表单控件相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验。...响应式表单 建立表单 由组件隐式创建表单控件实例 在组件类中进行显示创建控件实例 表单验证 指令 函数 在表单数据发生变更,模板驱动表单通过修改 ngModel 绑定数据模型来完成数据更新,...而响应式表单表单数据发生变更,FormControl 实例会返回一个新数据模型,而不是直接修改原来数据模型 4.2、模板驱动表单 通过使用表单专属指令(例如 ngModel 进行双向数据绑定)...在数据验证失败情况下,对于系统来说,表单是不允许提交,因此可以将提交事件绑定到表单 ngSubmit 事件属性上,通过模板引用变量形式,在提交按钮处进行数据有效性判断,当无效,禁用表单提交按钮...同模板驱动表单数据有效性验证相同,在响应式表单中同样可以使用原生表单验证器,在设定规则,需要将模板中控件名对应数据第二个参数改为验证规则 在响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应

    18.9K20

    关于在用curl函数post网页数据,遇上表单提交 type为submit 类型而且没有name和id可能遇到问题及其解决方法

    我之前介绍用curl去获取网页cookie 文章中 出现过一个 变量 data,即要传送过去 数据, 这个数据一般网站登陆账号和密码,对应着输入框name,下面我举一个例子。... 格式  就可能  UserName=123456&PassWord=123&Up=++%B5%C7%C2%BC++ 这是怎样知道呢??...上面的例子最简单,实际上,如果遇到了我说,怎么办, 这时候要看它表单 action链接 因为这个才是真正提交页面...ajax提交,就要用到抓包工具,抓取传送源代码,再组合成data,post 还一种情况,就是有隐藏输入情况,什么意思呢, type="hidden" 这是不用自己输入,但是,我们在用curl函数访问登陆页面的时候...最后提示,切记,数据传送urlencode编码后数据,在传之前,记得先编码,直接套用抓包工具源代码,就不用再编码了,它已经帮你干了。

    1.2K70

    Angular 6.x 表单快速入门

    Driven 表单特点 使用方便 适用于简单场景 通过 [(ngModel)] 实现数据双向绑定 自动生成 Form Model (异步) 最小化组件类代码 不易于单元测试 Reactive 表单特点...目前 Angular 支持内建 validators 如下: required - 设置表单控件值是非 email - 设置表单控件值格式 email min - 设置表单控件值最小值 max...在 Angular 中,我们可以使用熟悉 标签来创建表单。...如何获取表单提交值? 在 Angular 中,我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象,然后通过 loginForm.value 来获取表单值。...ngModelGroup 指令 Angular 表单中提供另一特殊指令,可以对表单输入内容进行分组,方便我们在语义上区分不同性质输入。

    4.6K20

    Angular 2 表单(下)

    每一个 input 元素都有一个 name 属性, Angular 表单模块需要使用它为表单注册控制器。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...状态 为 true 类 为 false 类 控件已经被访问过 ng-touched ng-untouched 控件值已经变化 ng-dirty ng-pristine 控件值有效 ng-valid...当我们添加一个新网站,它把 active 标记设置为 false , 然后通过一个快速 setTimeout 函数迅速把它设置回 true 。...通过 ngSubmit 来提交表单 我们可以使用 Angular 指令 NgSubmit 来提交表单, 并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。...这个 siteForm 变量现在引用 NgForm 指令,它代表表单整体。

    1.7K10

    Angular 从入坑到挖坑 - 路由守卫连连看

    在跳转到组件前获取某些必须数据 离开页面,提示用户是否保存未提交修改 Angular 路由模块提供了如下几个接口用来帮助我们解决上面的问题 CanActivate:用来处理系统跳转到到某个路由地址操作...(判断是否可以进行访问) CanActivateChild:功能同 CanActivate,只不过针对子路由 CanDeactivate:用来处理从当前路由离开情况(判断是否存在未提交信息) CanLoad...4.2.3、CanDeactivate:处理用户未提交修改 当进行表单填报之类操作,因为会涉及到一个提交动作,当用户没有点击保存按钮就离开,最好能暂停,对用户进行一个友好性提示,由用户选择后续操作...; } } 这里模拟判断用户有没有修改原始数据,当用户修改了数据并移动到别的页面,触发路由守卫,提示用户是否保存后再离开当前页面 ?...路由守卫来进行路由认证授权,但是当我们并没有权限访问该路由权限,却依然点击了链接,此时框架路由仍会加载该模块。

    3.8K30

    第220天:Angular---路由

    在2005左右,兴起了一种叫做ajax技术,有了ajax之后,我们向服务端提交数据时候就不再需要使用from表单提交了,因为from表单之间提交会导致页面之间切换,也就是说无法实现单页应用。 ...ajax缺陷  1、不会在浏览器里面留下历史记录  2、用户无法将页面加为书签保存下来或者无法通过发送网址给其他人,其他人通过直接点击网址进入这个页面  3、ajax无法实现SEO优化,ajax对搜索引擎不友好...HelloCtrl这个控制器,来处理模板和数据之间绑定, 当他发现浏览器地址栏发现地址list这样一个地址时候,他就会调用另外一个模板,  其他所有的情况都会直接跳到hello, 这里大家需要注意...里面的模块如何进行切分, angularJS不再像以前一样,把所有的文件都合在angular.js这个文件里面,  而是切分成一个个独立js文件了, 所以这就导致了当我们需要使用路由时候,一定要在页面上手动导入...了,  写法上也会发生一定变化, 1 2 //写一个指令,这表示一个视图 3 4 我们看一下js部分,这里我们不在使用

    1.9K40

    AngularDart4.0 指南- 表单

    表单是商业应用程序主流。您可以使用表单登录,提交帮助请求,下订单,预订航班,安排会议,并执行无数其他数据录入任务。...在开发表单,创建一个数据录入体验非常重要,该体验可以通过工作流高效地引导用户。...当控件“原始隐藏消息实现了这个目标。 当您向表单添加一个“清除”按钮,您会看到此选项重要性。 英雄Alter Ego可选,所以你可以不用关那个。 英雄power选择必需。...表单提交目前无用。...提交标志变为真,表格消失。 您将看到表格中显示英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交标志。 当您单击编辑按钮,该表消失,并且可编辑表单重新出现。

    17.5K30

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库中FormGroup, FormControl,FormArray...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,在html中使用 NgForm 指令后将数据表单进行绑定,使用[(ngModel...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件值(获取setvalue...和更新) formgroup使用 表单提交 更新部分内容(patchValue) 表单验证(导入Validators,设置字段属性) 表单状态(status) formarray(管理任意数量控件

    2.8K50

    Angular 从入坑到挖坑 - HTTP 请求概览

    使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP 请求概览 三、Knowledge Graph ?...4.1.3、提交数据到服务端 在同后端接口进行交互,获取数据一般用 get 请求,而当进行数据新增、更新、删除则会使用 post、put、delete 这三个 HTTP 谓词 在毒鸡汤这个接口中...因为这里是以默认表单提交方式进行数据提交,当后端需要修改请求 body 格式,则需要我们修改请求 MIME 类型 当需要更改请求 MIME 类型或是需要添加授权访问 token 信息这一类操作...4.3、请求和响应拦截 在向服务器发起请求,一般需要我们在请求头中添加上授权 token 信息,与其当后端接口返回我们无权访问再来处理,是不是可以在发起请求前去进行拦截判断,如果不包含 token..., useClass: LoggingInterceptor, multi: true } ]; 由于拦截器具有将发送到服务端 HTTP 请求进行监视、转化,以及拦截请求响应信息双重效果,因此当我们注册了多个拦截器

    5.3K10

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

    首先需要操作表单模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应几种状态...模板驱动表单依赖FormsModule,数据驱动表单依赖FormsModule,ReactiveFormsModule 一般做表单校验及操作推荐用数据驱动方式,好维护和理解。。...--testform这个局部变量保存了表单所有相关信息--> <!...; 在Submit()函数内,在点击提交时候对整个表单一一去判断,传统方式基本这样 每个控件输入时候对应去触发对应事件做校验,比如[ngModelChange]来处理双向绑定值校验 ---- 数据驱动...=》 可以理解为获取且可以操作整个表单数据 FormBuilder:表单数据构建工具[构建初始表单],简化构建代码(包括了new FormGroup(),new FormControl(),new

    3.8K20

    11-angular 实例学习-2

    ID:{{formData.channelId}} div> <script src='https://cdn.bootcss.com/<em>angular</em>.js/1.6.8/<em>angular</em>.js...在页面上需要传两参数<em>时</em>,就在过滤器后面以冒号(:)隔开,如下面要传<em>的</em>分割器;在页面要实现传三个及以上<em>的</em>参数<em>时</em>,我们可以通过在过滤器后面继续加冒号( :) 和参数<em>的</em>格式添加。...总结就是,第一个参数<em>是</em>管道符号前面的<em>数据</em>,多个参数<em>时</em>,在过滤器名称后面以冒号隔开。...$scope.checkData ={ "nameCheck":"m", "phoneCheck":"m" }; //<em>提交</em><em>时</em>校验<em>数据</em>...适用于监听数组或者监听<em>的</em><em>是</em>一个对象上<em>的</em>所有属性。

    2.2K40

    前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    表单表单元素都需要通过name引用,请注意设置name值。获得错误详细参数可以在示例中看到。 示例代码: <!...二、过滤器 使用过滤器格式化数据,变换数据格式,在模板中使用一个插值变量。...点击价格与名称可以进行排序,排序时显示向上或向下箭头,在搜索框中可以输入查询条件过滤数据。验证搜索框中内容只能字母与数字,不允许输入其它类型字符。...包含请注意中间页面地址要加引号,需要一个字符,如果不加会认为一个变量。.../angular-touch.min.js" type="text/javascript" charset="utf-8"> 在定义模块指定要依赖模块: /

    15.4K60

    【译】.NET Core 3.0 Preview 3中关于ASP.NET Core更新内容

    Forms&validation 此预览版本添加了用于处理表单和验证内置组件和基础结构。 使用. net进行客户端web开发一个好处能够在客户端和服务器之间共享相同实现逻辑。...验证逻辑一个很好逻辑。Razor组件中Forms&validation支持包括使用数据注解处理验证支持,或者可以插入你喜欢验证系统。...,并运行它,你将获得一个基本表单,该表单在字段更改和表单提交自动进行字段输入值验证。...当我们打开应用程序时,我们会看到常用Home、Counter和Fetch数据菜单选项以及两个新选项:Register和Login。...4: { 5: ... 6: } 客户端路径认证 为了在Angular应用程序访问页面,要求对用户进行身份验证,我们将[AuthorizeGuard]应用到正在配置路由上。

    22.7K10

    (转) 别再对 Angular 表单 ControlValueAccessor 感到迷惑

    来实现一种针对 Angular 表单数据通信机制。...原生表单控件数量有限,但是自定义表单控件无限,所以 Angular 需要一种通用机制来桥接原生/自定义表单控件和 formControl 指令,而这正是 ControlValueAccessor...下图 Angular 表单控件 如何通过 ControlValueAccessor 来和原生表单控件交互(译者注:formControl 和你写或者 Angular 提供 CustomControlValueAccessor...表单控件如何数据同步(译者注:作者贴可能 Angular v4.x 代码,v5 有了点小小变动,但基本相似): export function setUpControl(control: FormControl...但是,我们想要,使用 slider 组件作为表单一部分,并使用模板驱动表单或响应式表单指令与其数据通信,那就需要让其实现 ControlValueAccessor 接口了。

    3.8K20

    Angularjs1.X进阶笔记(1)—两种不同双向数据绑定

    2.1 directive中双向数据绑定 在设定自定义指令scope参数,将属性值设置为=就可以实现双向数据绑定,这里API解释: 父级controller中指定变量会与自定义指令link...而当我们再点击4次数字标签(一共点了5次)后,从控制台可以看出,scope.pagination值已经成为10,而页面上使用ng-bind指令获取到结果却依旧5。...当我们点击show $scope.testInfo,控制台打印出了$scope.testInfo.content值为5,这下证据坐实了,明明说好双向数据绑定,然而当自定义指令中scope.pagination...官方建议使用$watch方法来追踪scope中变量,而当我们这样做,会发现$watch函数仅能追踪到那些通过修改controller中数据模型而影响link函数中变量行为并更新视图。...其基本过程这样,每当我们使用ng-model或ng-bind指令将数据模型中某个变量值和html页面上某个标签内容联系起来时,Angular就会把这些变量放进一个WatchCollection集合中

    3.5K20

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

    NgModel - 与[(ngModel)]形成元素双向绑定 在开发数据输入表单,通常都会显示数据属性,并在用户进行更改时更新该属性。 使用NgModel指令进行双向数据绑定使得这一切变得简单。...但是NgForm指令有,它解释了如果heroForm.form.valid无效并且将整个表单控件树传递给父组件onSubmit方法,您可以禁用提交按钮。...和null属性路径 Angular安全导航运算符(?.)与Dart条件成员访问运算符一样,防止属性路径中便利方法。 在这里,如果currentHero为,则防止视图呈现失败。...不幸,当currentHero为,应用程序崩溃。 你可以用*ngIf来解决这个问题。 <!...想象一下,在诸如a.b.c.d这样长属性路径中某个地方防止值。 Angular安全导航操作符(?.)一种更为流畅和方便方法来防止在属性路径中出现。表达式在达到第一个值时会被释放。

    30K20
    领券