我目前正在使用以下内容.
$scope.$$childHead.customerForm[firstName], 以便:
<form name="customerForm">
<input type="text" name="firstName"
ng-model="data.customer.firstName"
tabindex="1"
ng-disabled="!data.editable"
validationcustomer />
</form>
但这仅适用于Chrome.现在我尝试了以下内容:
$scope.editCustomerForm[firstName], 以便:
<form name="customerForm" ng-model="editCustomerForm">
<input type="text" name="firstName"
ng-model="data.customer.firstName" tabindex="1"
ng-disabled="!data.editable"
validationcustomer />
</form>
哪个不起作用.请注意,我的表单位于Foundation选项卡中.我怎样才能访问firstName？
编辑:看起来它form没有被添加到scope基础选项卡中的时间.
任何人都有这个解决方案？
我正在尝试对文件更改进行一些验证.这是我的代码:
查看/模板
<input type="file" name="file" id="file"
onchange="angular.element(this).scope().setFile(this)"
required />
<span class="error" ng-show="myForm.file.$error.required">Error</span>
<span class="error" ng-show="myForm.file.$error.size">Selected file is too large</span>
<span class="error" ng-show="myForm.file.$error.filetype">Unsupported File type</span>
调节器
angular.module("myapp").controller("myctrl", function($scope) {
$scope.setFile = function(element) {
$scope.$apply(function($scope) {
var fileObject = element.files[0];
$scope.file.fileType =
fileObject.type.toUpperCase().substring(fileObject.type.indexOf("/") + 1);
// Validation
if (!$scope.isValidFileType($scope.file.fileType)) {
myForm.file.$setValidity("myForm.file.$error.filetype", false);
}
if (fileObject.size > 1000*1000*10) {
myForm.file.$setValidity("myForm.file.$error.size", false);
}
});
};
$scope.isValidFileType = function(fileExtension) {
var supportedExtensions = ["doc", "docx", "ppt", "pptx", "jpg", "gif", "png"]; // etc.
return (jQuery.inArray(fileExtension, supportedExtensions) …我在这里有脚本,ng-pattern工作正常,因为只有输入匹配模式后,才会在输出中显示scope.subnet.但是如果ng-pattern不匹配,ng-show不会显示任何错误
<body ng-contoller="myConfigGenCtr">
<form novalidate name="myForm">
<div class="form-group">
<label for="hostname">Firewall hostname</label>
<input type="text" ng-model="hostname" class="form-control" id="hostname">
</div>
<div class="form-group">
<label for="subnet">Firewall subnet</label>
<input type="text" ng-model="subnet" class="form-control" id="subnet"
required ng-pattern="/^(?:[0-9]{1,3}\.){3}/" >
<div class="custom-error" ng-show="myForm.subnet.$error.pattern">
Not a valid subnet, should be i.e. 10.x.y. (3 bytes only)</div>
</div>
</form>
<div>Output: {{subnet}}</div>
</body>
我正在使用一个ng-pattern来检查输入中的唯一数字.但对我而言,这不起作用.我可以在characters之后输入number.我怎么能限制它？
这是我的代码:
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="text" ng-model="price" name="price_field" ng-pattern="/^[0-9]/" required>
<span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
<input type="submit" value="submit"/>
</form>
</div>
即使我的所有输入字段都是空白,我的表单也显示为有效.我在输入字段中有必需的关键字.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="/components/angular/angular.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<main>
<div class="container">
<div class="row">
<section ng-controller="LogInController as loginCtrl">
<form name="signUpForm" action="/createuser" method="POST" novalidate>
<fieldset>
<div class="field input-field">
Email <br />
<input type="email" name="email" required />
</div>
<div class="field input-field">
Password <br />
<input type="password" name="password" required />
</div>
<div class="field input-field">
Confirm Password <br />
<input type="password" name="confirmation" required />
</div>
!! -- Form valid? {{signUpForm.$valid}} -- !!
<div class="actions"> …我有一个HTML表格如下:
<tbody>
<tr ng-repeat="r in targetTable.rows">
<td contenteditable="true" class=""></td>
<td contenteditable="true"
ng-repeat="column in targetTable.columns"
ng-model="r[column.id]"
ng-blur="!r.id? addNewRow(r[column.id], r): undefined">
</td>
</tr>
</tbody>
我使用contenteditable指令使单元格可编辑.
app.directive('contenteditable', ['$sce', function($sce) {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
var disable = (attrs.contenteditable === "false") || !Boolean(attrs.contenteditable);
if (!ngModel || disable) return; // do nothing if no ng-model
// Write data to the model
var read = function(value) {
var html = element.html() || (typeof value === "string" ? value …contenteditable angularjs angularjs-directive angularjs-ng-model angularjs-forms
单击提交按钮时如何获取文件内容。我只得到第一和第二输入。请参考摘要：
!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<input type="file" ng-model="user.file">
<br><br>
<button ng-click="reset()">Submit</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.reset = function(){
console.log($scope.user)
}
});
</script>
</body>
</html>我创建了一个我的问题的独立案例:http: //plnkr.co/edit/6LXW5TG76LC9LNSrdpQC
以下是孤立案例的代码:
<!DOCTYPE html>
<html ng-app="App">
<head></head>
<body ng-controller="ExampleController">
<form name="form" ng-submit="submit()" novalidate>
<input type="number" name="number" ng-model="number" required><br>
<span ng-show="form.number.$error.required && form.number.$touched">Required<br></span>
<span ng-show="form.number.$error.number">Not a number<br></span>
<input type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('ExampleController', function($scope) {
$scope.submit = function() {
alert('send to server: ' + $scope.number);
}
});
App.run();
</script>
</body>
</html>
基本上,该示例包含一个数字字段,其下方是错误消息,显示输入无效时(空或不是数字).
但是表单仍然会提交,虽然如果字段值无效,字段值设置为'undefined',我宁愿在发送到服务器之前检查表单是否有效(本例中的警告框).
所以我的问题是 - 在AngularJS中,有没有办法检查一个表单是否在控制器内有效？或者另一种阻止表单无效的提交方式？
我创建了一个放在桌子下面的div中的工作表单;
<div class="row">
<form class="form-signin" ng-submit="controller.add.save()">
<h2 class="form-signin-heading">Add an item:</h2>
<label for="inputName" class="sr-only">Name</label>
<input type="text" name="name" id="inputName" class="form-control" placeholder="Name" required autofocus ng-model="controller.add.name">
<label for="inputDescription" class="sr-only">Description</label>
<textarea name="description" id="inputDescription" class="form-control" placeholder="Description" ng-model="controller.add.description">
</textarea>
<button class="btn btn-lg btn-primary btn-block" type="submit">Add</button>
</form>
</div>
然后我决定将表格移到上面的表格中;
<tr>
<form ng-submit="controller.add.save()">
<td>Add an item</td>
<td><input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name"></td>
<td><textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea></td>
<td><button class="btn btn-xs btn-primary" type="submit">Add</button></td>
</form>
</tr>
但现在表格不再适用了.我究竟做错了什么？
我使用Angularjs 1.5版来验证表单中的输入.
但是,它不能使用呈现组合的自定义指令.组合根据传递给它的参数检索项目名为'listId'.然后,它使用ng-repeat在'lookupItems'上迭代.我想有些东西丢失了,比如ngModel.为什么以及如何实施它？
组合指令:
app.directive('combo', function($http) {
return {
restrict: 'AE',
template: '<div class="input-group"> <select ng-model="selectedItem">' +
'<option ng-repeat="option in lookupItems" value={{option.ListValueID}}>{{option.Translation.Value}}</option></select>' +
' {{selectedItem}} </div>',
replace: true,
scope: {
listId: '=',
defaultItem: '=',
selectedItem: '='
},
controller: function($scope) {
$http({
method: 'GET',
url: '/home/listvalues?listid=' + $scope.listId
}).then(function(response) {
$scope.lookupItems = response.data;
}, function(error) {
alert(error.data);
});
},
link: function(scope, element, attrs) {}
};
});
html视图:迭代包含要呈现的控件类型的属性,然后根据'attribute.Required'将其设置为布尔值,这是真的.
<form name="profileAttributesForm" ng-controller="metadataCtrl" class="my-form">
<div ng-repeat="a in attributes">
<div ng-if="a.DataType == 1"> …required-field angularjs angularjs-directive angularjs-forms
angularjs ×10
angularjs-forms ×10
forms ×4
javascript ×4
validation ×2
html ×1
html-table ×1
required ×1