以下是我的代码段.我想用angular来验证我的下拉列表.
<td align="left" width="52%">
<span class="requiredSmall">*</span>
<select class="Sitedropdown" style="width: 220px;"
ng-model="selectedSpecimen().serviceID"
ng-options="service.ServiceID as service.ServiceName for service in services">
<option value="" ng-selected="selected">Select Service</option>
</select>
</td>
有效方式:
有效值可以是"选择服务"之外的任何值,它是我的默认值.像其他ASP.net要求字段验证器DefaultValue ="0"用于下拉列表,所以这里我的下拉列表将从服务绑定,我想选择除"选择服务"之外的所有其他值.
我ng-pattern="/0-9/"用来设置price_field不接受decimal number.但是当我输入自然数(从0到9999999)时,ng-show会被激活Not valid number!.
我哪里做错了？.请帮忙.
<form name="myform" data-ng-submit="create()">
<input type="number"
name="price_field"
data-ng-model="price"
require
ng-pattern="/0-9/"
<span ng-show="myform.price_field.$error.pattern">Not valid number!</span>
<input type="submit" class="btn">
</form>
我试图仅在成功验证时提交表单.验证适用于所需但不适用于ng-minlength
表单输入无效但表单仍在提交.
<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
<div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
<label class="control-label" for="mobile">Mobile</label>
<div class="controls">
<input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11" required />
<span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
<span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value ="submit" />
</div>
count: {{count}}<br />
<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
</div>
</form>
我究竟做错了什么.
我不想使用提交按钮禁用方法.
想要将电话号码设置为10位,如何使用Angular js执行此操作.
这是我尝试过的:
<form class="form-horizontal" role="form" method="post" name="registration" novalidate>
<div class="form-group" ng-class="{'has-error': registration.phone.$error.number}">
<label for="inputPhone" class="col-sm-3 control-label">Phone :</label>
<div class="col-sm-9">
<input type="number"
class="form-control"
ng-minlength="10"
ng-maxlength="10"
id="inputPhone"
name="phone"
placeholder="Phone"
ng-model="user.phone"
ng-required="true">
<span class="help-block"
ng-show="registration.phone.$error.required &&
registration.phone.$error.number">
Valid phone number is required
</span>
<span class="help-block"
ng-show="((registration.password.$error.minlength ||
registration.password.$error.maxlength) &&
registration.phone.$dirty) ">
phone number should be 10 digits
</span>
</div>
</div>
</form>
但我没有收到验证错误.
我如何计算表单上的错误数量？
HTML
<div ng-show="form.$submitted && form.$invalid">
Sorry but 3 errors have been made.
</div>
angularjs angularjs-directive angularjs-scope angularjs-validation
我想检查一个角度控制器内的表格是否有效.使用$ scope时这似乎很简单,但是我无法使用'controller as'语法.
当我尝试访问表单时.$ valid我收到错误消息"无法读取属性'$ valid'of undefined".
plunkr:http://plnkr.co/edit/w54i1bZVD8UMhxB4L2JX？p = preview
HTML
<div ng-app="demoControllerAs" ng-controller="MainController as main">
<form name="contactForm" novalidate>
<p>
<label>Email</label>
<input type="email" name="email" ng-model="main.email" required />
</p>
<p>
<label>Message</label>
<textarea name="message" ng-model="main.message" required></textarea>
</p>
<input type="submit" value="submit" ng-click="main.submit()" />
</form>
</div>
JS
var app = angular.module('demoControllerAs', []);
app.controller('MainController', [function () {
var main = this;
main.submit = function () {
var isValid = main.contactForm.$valid;
console.log(isValid);
};
}]);
我正在开发一个应用程序,可以在用户更改内容时自动保存更改,例如输入字段的值.我已经编写了一个autosave指令,该指令被添加到应该自动触发保存事件的所有表单字段中.
模板:
<input ng-model="fooCtrl.name" autosave>
<input ng-model="fooCtrl.email" autosave>
指示:
.directive('autosave', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
function saveIfModelChanged () {
// save object containing name and email to server ...
}
ngModel.$viewChangeListeners.push(function () {
saveIfModelChanged();
});
}
};
}]);
到目前为止,这一切对我来说都很好.但是,当我在混合中添加验证时,例如验证输入字段是有效的电子邮件地址,undefined一旦viewValue更改为无效的电子邮件地址,modelValue就会设置为.
我想要做的是:记住最后一个有效的modelValue并在autosaving时使用它.如果用户更改的电子邮件地址是无效的,对象含有name与email仍应保存到服务器.使用当前有效name和最后有效email.
我开始时保存最后一个有效的modelValue,如下所示:
添加验证的模板:
<input type="email" ng-model="fooCtrl.name" autosave required>
<input ng-model="fooCtrl.email" autosave required>
保存lastModelValue的指令:
.directive('autosave', ['$parse', function ($parse) …我想覆盖AngularJS的电子邮件验证程序.我希望它使用我的自定义字符串来验证电子邮件地址.我在他们的文档中找到的代码是这样的:JS:
var app = angular.module('registrationApp', []);
app.directive('overwriteEmail', function() {
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;
return {
require: 'ngModel',
restrict: '',
link: function(scope, elm, attrs, ctrl) {
if (ctrl && ctrl.$validators.email) {
// this will overwrite the default Angular email validator
ctrl.$validators.email = function(modelValue) {
return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
}
}
}
}
});
HTML:
<div data-ng-app="registrationApp" data-ng-init="">
<form name="form" class="css-form" novalidate>
<div>
Overwritten Email:
<input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
<span ng-show="form.overwrittenEmail.$error.email">This email format is invalid! </span><br>
Model: {{myEmail}}
</div>
</form> …javascript html5 angularjs angularjs-directive angularjs-validation
谁能告诉我是否可以在自定义 Angular 指令的控制器中要求和使用 ngModel 。我试图远离链接功能。我看到大多数示例都使用链接函数，但我认为必须有某种方法可以在指令控制器内使用它？或者只能在链接函数中访问？我见过的一种方法（如下所示）给了我未定义的信息。不知道还有没有其他方法？？我正在尝试验证组件并在错误对象上设置无效的类。
//directive
angular.module('myApp', [])
.directive('validator', function (){
return {
restrict: 'E',
require: {
ngModelCtrl: 'ngModel',
formCtrl: '?^form'
},
replace: true,
templateUrl: 'view.html',
scope: {},
controllerAs: 'ctrl',
bindToController: {
rows: '=',
onSelected: '&?' //passsed selected row outside component
typedText: '&?' //text typed into input passed outside so developer can create a custom filter, overriding the auto
textFiltered: '@?' //text return from the custom filter
ngRequired: "=?" //default false, when set to true the component needs to validate …javascript angularjs angularjs-directive angular-ngmodel angularjs-validation