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

当ng-model取值时使用数字获取"ngModel:nonassign"?

"ngModel:nonassign"是AngularJS中的一个错误消息,它表示在使用ng-model指令时,尝试将非数字值分配给一个数字类型的变量。

在AngularJS中,ng-model指令用于在HTML元素和应用程序数据模型之间建立双向数据绑定。当使用ng-model指令绑定一个数字类型的变量时,如果尝试将非数字值(如字符串、布尔值等)分配给该变量,就会触发"ngModel:nonassign"错误。

这个错误通常发生在用户输入表单字段时,如果用户输入了一个非数字值,AngularJS会尝试将其分配给绑定的数字变量,从而导致错误的发生。

为了解决这个问题,可以在输入字段上添加合适的验证器,以确保只有数字值被输入。可以使用AngularJS内置的验证器,如ng-pattern、ng-min、ng-max等,或者自定义验证器来实现。

以下是一个示例,演示如何使用ng-pattern验证器来限制只允许输入数字:

代码语言:html
复制
<input type="text" ng-model="myNumber" ng-pattern="/^\d+$/" />

在上面的示例中,ng-pattern指令使用正则表达式"/^\d+$/"来验证输入值是否为数字。如果输入的值不是数字,则会触发"ngModel:nonassign"错误。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,无法提供相关链接。但腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。

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

相关·内容

angularjs 表单验证

数字 验证输入内容是否是数字,将input的类型设置为number: 7....可以使用formName.inputFieldName.property的格式访问这些属性。 修改的表单 布尔型属性,且仅当用户实际已经修改的表单。...$invalid 最后两个属性在用于DOM元素的显示或隐藏是特别有用的。同时,如果要设置特定的class,他们也非常有用的。...例如某个字段中的输入非法,.ng-invlid类会被添加到这个字段上。 你可以编辑自己喜欢的CSS . 你可以私有定制化这些类来实现特定的场景应用....$setViewValue()方法适合于在自定义指令中监听自定义事件(比如使用具有回调函数的jQuery插件),我们会希望在回调设置$viewValue并执行digest循环。

6.6K70

Angularjs的表单验证

="user.email" /> 数字 验证输入是一个数字,设置input的type属性为number: <input type="number" name="number" ng-model="user.age...控制验证的样式 AngularJS处理的验证,它将根据验证的状态增加一些特定的class属性。...现在,我们将看到那些没有通过的验证的错误信息。...虽然及时验证很棒,它可以立即提醒用户,但是他们正在输入很长的能通过验证的文字,他们将在输入中途看到错误提示。有更好的方式来处理验证:当用户点击提交,或者他们将光标移开输入框之后。...失去焦点验证错误 如果你想保留错误验证的实时性,那么可以在用户离开该输入框显示错误信息。要做到这一点,我们可以添加一个指令,将添加一个新的变量。

2.2K10
  • Angular—都2019了,你还对双向数据绑定念念不忘

    原文:https://zhuanlan.zhihu.com/p/58787662 双向数据绑定是AngularJs的一大卖点,当初问世开发人员无不惊讶,“Wow, it's so crazy"。...像AngularJs中一样使用双向绑定 在AngularJs中,双向数据绑定的写法: // controller.js ......$event可以视作获取输出的关键字,不同场景下代表的对象是不同的,上面这段代码中由于是监听了input事件,所以它代表的就是 InputEvent,通过属性查询我们获取到了事件上传递的值。...在不看源码的情况下,如果是让你去实现 ngModel 这个指令,相信你肯定有思路。 肯定要把输入属性 ngModel 和input元素的value值关联起来。...输入+输出===双向绑定 现在,我们只需要使用简写写法把它们合起来,这就是‘双向绑定’ 为什么这样写组件中的数据会被修改?

    4.4K30

    前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    cdn 3)、安装node.js,使用npm获取 示例代码: <!...4、HelloController可以获取它所需要的$scope对象,则没有必要去创建它,依赖注入 5、文本框中的值发生变化时$scope对象中的值立即变化,模型与视图双向绑定 6、没有必要自己调用HelloController...: 方法二与方法一的区别: 使用模块标签{{ }}加载慢或渲染慢用户将看到标签,而ng-bind不会,但是使用模块要方便。... $scope中有isChecked与没有isChecked的区别 ngModel 会尝试使用表达式的计算结果来绑定到当前域上的属性...表达式改变,以前添加的类会被移除,并且只会添加之后新产生的类。 ngStyle指令允许你在HTML元素上条件化设置CSS样式。

    15.3K100

    前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    cdn 3)、安装node.js,使用npm获取 示例代码: <!...4、HelloController可以获取它所需要的$scope对象,则没有必要去创建它,依赖注入 5、文本框中的值发生变化时$scope对象中的值立即变化,模型与视图双向绑定 6、没有必要自己调用HelloController...加载慢的效果: ? 方法二与方法一的区别: 使用模块标签{{ }}加载慢或渲染慢用户将看到标签,而ng-bind不会,但是使用模块要方便。... $scope中有isChecked与没有isChecked的区别 ngModel 会尝试使用表达式的计算结果来绑定到当前域上的属性...表达式改变,以前添加的类会被移除,并且只会添加之后新产生的类。 ngStyle指令允许你在HTML元素上条件化设置CSS样式。

    12.6K30

    Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    " id="example-ngModel" name='currentName'> //注意某些情况下需要加name表示唯一标识,不加的话可能会报错 导入 FormsModule 以使用 ngModel...要想在双向数据绑定中使用 ngModel 指令,必须先导入 FormsModule 并将其添加到 NgModule 的 imports 列表中。...ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变要执行的表达式 ng-checked 规定元素是否被选中 ng-class 指定 HTML 元素使用的 CSS 类 ng-class-even...,如:jQuery ng-keydown 规定按下按键事件的行为 ng-keypress 规定按下按键事件的行为 ng-keyup 规定松开按键事件的行为 ng-list 将文本转换为列表 (数组) ng-model...ng-mouseleave 规定鼠标指针离开元素的行为 ng-mousemove 规定鼠标指针在指定的元素中移动的行为 ng-mouseover 规定鼠标指针位于元素上方的行为 ng-mouseup

    5.3K41

    Angular系列教程-第四节

    等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...总结 响应式表单是动态的,模板驱动表单是固定的 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件的值(获取setvalue...) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4...使用 HTML5 的 minlength 属性,此验证器也会生效。 maxLength 此验证器要求控件值的长度小于等于所指定的最大长度。...使用 HTML5 的 maxLength 属性,此验证器也会生效。 pattern 此验证器要求控件的值匹配某个正则表达式。使用 HTML5 的 pattern 属性,它也会生效。

    2.8K50

    Angularjs基础(四)

    AngularJS过滤器可用于转换数据:           currency     格式化数字为货币格式           filter       从数组中选着应子集。           ...                姓名为{{lastName | lowercase}}              currency 过滤器       currency 过滤器将数字格式化为货币格式...="quantity">                                  总价={{(...(x){           return hexify.myFunc(x);         };     }])     在从对象会数组中获取值你可以使用过滤器:       ...从服务端载入JSON 数据,$scope.names变为一个数组。

    2.9K90

    angularjs学习第八天笔记(指令作用域研究)

    您好,在前两天对指令的简单了解和系统指令学习后 今天主要研究其指针作用域的相关事情   每一个指令在创建,其实就构成了自己的一个小的模块单元。...angularjs其作用域通过scope来实现,其取值有三种情况:true、false、{} 其默认值是false:学习也就针对这3种情况进行研究 其一、scope=false   和父级完全共用一个作用域...其二、scope=true   创建了一个新的 作用域,初始化时继承父作用域   表现形式:子作用域属性值不改变一直使用父作用域对应的属性值   一旦子作用域的属性值发生改变,就在受父作用域影响...但是:这一切的前提是:数值是值类型(字符串、布尔、数值)   也就是说:数值为应用类型(obj)其实和 为了直观的体现两种的差异,下面进行一个练习: scope=true:创建了一个新的 作用域,初始化时继承父作用域 表现形式:子作用域属性值不改变一直使用父作用域对应的属性值

    41010

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

    而响应式表单在表单数据发生变更,FormControl 实例会返回一个新的数据模型,而不是直接修改原来的数据模型 4.2、模板驱动表单 通过使用表单的专属指令(例如 ngModel 进行双向数据绑定)...name 属性则是 angular 用来注册控件的 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单中使用 ngModel...,从而生成错误信息列表 在进行用户输入数据有效性验证,在控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...对于使用了 FormGroup 的表单来说,使用 setValue 进行数据更新,必须保证新的数据结构与原来的结构相同,否则就会报错 import { Component, OnInit } from...,返回 null,数据无效,则会返回一个对象信息,这里的 nameinvalid 就是我们在模板中获取到的错误信息的 key 值 <label

    18.9K20

    4、Angular JS 学习笔记 – 创建自定义指令

    下面的代码也匹配ngModel: 标准化 Angular标准化一个元素的标签和属性名称去确定一个元素匹配哪个指令...我们通常引用指令通过区分大写小的驼峰标准名称(例如 ngModel)。不过,HTML是不区分大小写的,我们在DOM上引用指令通过小写方式,通常在元素上使用中划线分割属性名(例如 ng-model)。...使用ngAttr,$interpolate的allOrNothing标记已经在使用,所以如果任何的表达式在插值字符串结果是undefined,则这个属性将会移除不会添加到元素。...这在构建可复用组件很有用,因为它防止组件在修改你的model状态只是你明确允许的哪些。...只有当你想创建一个指令想自由的控制内容,你才使用transclude:true.

    4.8K20
    领券