【实践中学习AngularJS表单】教程文章相关的互联网学习教程文章

javascript – angularjs中的表单更改和有效性【代码】

每当我的表单中的任何非只读输入发生变化且表单有效时,我都想做某些动作.让我们说,我的表格看起来像<form name="form" novalidate><input ng-model='input.a' required/><input ng-model='input.b' required/><input value='{{output.p | number: 2}}' readonly/><input value='{{output.q | number: 2}}' readonly/> </form>现在输入有任何变化,只要input.a和input.b有效,我就想做点什么.我试过$watch(输入),但它没有用.看着它的所...

javascript – 提交表单后如何重置表单和验证(AngularJS)【代码】

我想在提交表单后重置表单和所有验证消息.这是plunker:http://plnkr.co/edit/992RP8gemIjgc3KxzLvQ?p=preview 我的代码如下: 控制器:app.controller('MainCtrl', function($scope) {$scope.data={fullName:''};$scope.submit=function(){console.log('submit')$scope.myForm.$setPristine();$scope.myForm.$setUntouched();$scope.data={fullName:''};} });HTML:<body ng-controller="MainCtrl"> <form name="myForm" novalida...

javascript – AngularJS – 从表单验证中排除字段/脏【代码】

我有一个由HTML5表单敲击的ng-form内的复选框,我想要排除,所以它不会改变我的表单$state($pristine或$dirty). 我尝试过使用ignoreDirty指令 – Angular 1.2: Is it possible to exclude an input on form dirty checking? 和其他一些解决方案,并没有适用于HTML5表单内的ng-form,一些示例代码:<form name="mainForm" class="col-xs-10 form-validation" novalidate><ng-form name="innerForm"><div><span>check my<span ng-if="vm...

javascript – 使用PhantomJS在Angular.js应用程序中填写表单【代码】

我想使用PhantomJS测试AngularJS应用程序.第一步是使用用户名字段填写登录表单(假设没有其他字段).通常(在实际浏览器中)此字段由Angular控制(它具有ng-model属性),整个表单具有ng-submit属性. 所以在PhantomJS脚本中我做了 >输入用户名page.evaluate(function () {document.getElementsByName('username')[0].value = 'tester'; });>截取屏幕截图,看看输入中是否存在’tester’page.render('myfile.jpg');>点击提交按钮:page.eval...

javascript – AngularJS与Ajax表单提交需要单击两次【代码】

我需要从我的HTML页面执行以下活动: >用户输入电子邮件和密码进行注册>当用户单击“提交”时,将向表单发送表单> Control使用AJAX为RESTful Server创建JSON请求服务器响应相应.>根据服务器的响应,用户应该获得警报窗口,并且a消息打印在“提交”下面的当前页面(register.html)上.如果是“成功 – 注册”或“失败 – 不能寄存器”. 但是,目前它的工作方式如下:1),2),3)按预期工作. >用户首先单击“提交”并使用相应的消息获取警报窗...

javascript – 在Angular中取消提交表单【代码】

我需要一个表单,既可以是脏的,也不是$提交我的验证工作. 我试图通过CSS使用.ng-invalid,.ng-dirty和.ng-提交的类来实现这一点,这些类通过angular动态添加.这意味着我不能简单地在表单上将$submit设置为false,因为这不会删除关联的类.我也不能使用$setPristine或$setUntouched,因为这些将删除$dirty标志及其类. 有没有办法将表单设置为未提交,以便删除.ng提交的类并且表单仍然是脏的?解决方法:您可以使用$setPristine后跟$setDirty...

javascript – AngularJS验证表单数组长度【代码】

假设我有一个带有属性favoriteColors的模型对象{...favoriteColors: ['red', 'green', 'blue'].... }我用ng-repeat将它们暴露给用户<form name="userForm">...<ul><li ng-repeat="color in user.favoriteColors"><input type="text" ng-model="color" /><a href="" ng-click="delete(color)">remove</a></li></ul><a href="" ng-click="add()">Add a new favorite color</a>... </form>我希望能够检查favoriteColors字段的有效性<d...

javascript – 动态地使用JSON Schema进行AngularJS表单验证【代码】

我需要动态验证AngularJS中的json.我正面临从架构到页面加载字段的问题.我是AngularJS的新手,所以我对它没有那么多的了解.我创建了表单,但我无法动态验证它.myApp.controller('appController', ['$scope','$http', function($scope, $http) {var NUMBER_REGEXP = /^[0-9]+$/;$http({ method: 'GET', url: 'JsonSchema.json' }).then(function successCallback(response) {$scope.data = angular.fromJson(response);$scope.data = ...

javascript – Angular:在没有jQuery的情况下点击并清空一个表单字段?【代码】

我有一个表单输入,我想模糊(去焦点),并在单击按钮时清空. 在AngularJS中,我在控制器中这样做:angular.element('#search-input').val(''); angular.element('#search-input').blur();在Angular(4.4.4)中我有这样的工作方式:$('#search-input').val(''); $('#search-input').blur();但我宁愿不使用jQuery.在Angular中这样做的正确方法是什么? 这是整个组件:import { Component, OnInit } from '@angular/core';@Component({selec...

javascript – 为什么不调用AngularJS表单处理程序方法?【代码】

为什么下面显示的AngularJS表单不会在控制器中调用它的confForm()处理程序方法?我知道控制器连接到视图,因为视图打印在控制器中设置的confirmStatus和wleadid变量的值.但是,表单中的验证警告不会在用户的浏览器中打印,并且当用户单击提交按钮时没有任何操作.具体来说,下面的confForm()处理程序方法中有两个SYSO命令,它们永远不会打印到控制台,因此显示该方法未被触发.为了使confForm()表单处理程序方法运行,需要对下面的代码进行哪...

javascript – 添加动态元素时的AngularJS表单验证【代码】

我有一个AngularJS验证表单.问题是我使用Jquery向此表单添加输入元素,而AngularJS不会将这些元素添加到表单的验证中.这是一个例子:http://jsfiddle.net/ULEsy/var input = $compile($('<input type="text" ng-model="textinput" required />'))($scope); $("#someform").append(input);在示例中,即使输入字段无效(空 – 可以通过红色边框看到),整个表单也是有效的.有帮助吗?解决方法:@Ephi,我找到了解决这个问题的方法.显然,您需...

javascript – 反应式(基于模型)表单中的Angular 2 md-radio按钮不起作用并停止md输入显示【代码】

我按照http://devdocs.io/angular~2_typescript/api/forms/index/radiocontrolvalueaccessor-directive的反应形式单选按钮的说明,使用Angular 2.1.2和Google的MD-alpha.10 Atom-typescript说我没有错误.我收到以下控制台错误.core.umd.js:3004 EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/components/input/postApartment4Rent.component.html:47:62 caused by: No value accessor for form con...

javascript – 使用Nodemailer在Angular中创建联系表单【代码】

我正在尝试为我的网站创建一个联系表单.我正在使用MEAN堆栈,因此nodemailer模块似乎有意义使用. 我创建了一个端点’/ api / contact’,接受POST请求并使用该请求上的数据发送邮件. 然后我在我的角度应用程序中有一个表单,在提交时调用一个函数来生成一个http. 希望这听起来很正确.顺便说一句,我一直在使用Yeoman angular-fullstack生成器,所以我的代码遵循这个结构. 当应用程序加载到我的控制台时,我看到一个500错误代码,然后当我查...

javascript – 可能未处理的拒绝 – 使用angularjs创建表单时出错【代码】

我创建了这个简单的Web应用程序,将数据放入firebase数据库.问题是我在浏览器中打开网页时出错.这是我得到的错误Possibly unhandled rejection: {} angular.js:14324此外,当我第一次按下sumbit按钮而字段中没有数据时,它会显示与上面显示的相同的错误.然后当我再次按下按钮时,它会将空字段提交给数据库.我认为angular发现字段是空的问题.我错过了什么吗?将文本放在字段中工作正常,它也提交到数据库.它只是空字段,他们是问题.var ap...

javascript – 隐藏字段上的Angular 2表单验证【代码】

我有一个银行贷款申请,其中包含很多输入字段,其中一些是隐藏的(隐藏字段是根据一组条件动态显示的).例如,如果选择选项1,则会显示隐藏字段,并隐藏其他一些字段.如果选择选项2,某些字段将显示,其他字段将隐藏.在表单的最后我有一个意味着按钮将被禁用,直到整个表单有效,但我现在的问题是隐藏字段也得到验证,因此表单将永远无效.有没有办法告诉角度如果隐藏它们不验证字段? 隐藏字段的方式如下例所示:<form [formGroup]="form"><sel...