我想将我的表单字段封装在一个指令中,所以我可以简单地这样做:
<div ng-form='myForm'>
<my-input name='Email' type='email' label='Email Address' placeholder="Enter email" ng-model='model.email' required='false'></my-input>
</div>
Run Code Online (Sandbox Code Playgroud)
如何访问myForm
我的指令,以便进行验证检查,例如myForm.Email.$valid
?
当动态创建"inputName"时,有人会如何使用formName.inputName.$有效?
<form name="formName">
<input ng-repeat="(variable) in variables"
type="text" name="variable.name"
ng-model="variable.name" required />
</form>
Run Code Online (Sandbox Code Playgroud)
HTML输入属性"name"的输出将是字符串"variablename",它将应用于所有重复输入.
如果我们试过这个
<form name="formName">
<input ng-repeat="(variable) in variables"
type="text" name="{{ variable.name }}"
ng-model="variable.name" required />
</form>
Run Code Online (Sandbox Code Playgroud)
HTML输入属性"name"的输出将是字符串"{{variable.name}}",它将应用于所有重复输入.
在这两个条件中的任何一个中,都不会动态创建每个重复输入元素的name属性; 所有输入将共享相同的输入名称.如果您想根据特定名称调用特定输入,那就太好了.
javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
通常要在Angular中验证表单,我会在ng-submit
指令上使用类似的东西:
<form name="formName" ng-submit="formName.$valid && submitForm()"></form>
Run Code Online (Sandbox Code Playgroud)
当表单具有我在构建表单时设置的名称时,这非常有用.但是,在我目前的情况下,我正在尝试基于对象列表创建多个表单.在这种情况下,每个表单都有一个即时确定的名称.
当用户提交其中一个表单时,如何在运行该submitForm()
表单的函数之前对其进行验证?
这是简化问题的一个方面:http: //jsfiddle.net/flyingL123/ub6wLewc/1/
我的问题是,如何访问表单的名称以进行验证?这是小提琴的代码:
var app = angular.module('app', []);
app.controller("AppController", ['$scope', function($scope) {
$scope.forms = [{
id: 1,
value: "val1"
}, {
id: 2,
value: "val2"
}, {
id: 3,
value: "val3"
}];
$scope.submitForm = function() {
alert('submitted');
}
}]);
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div id="app" ng-app="app" ng-controller="AppController">
<div class="formWrapper" ng-repeat="form in forms">
<form name="{{ 'form' + form.id }}" ng-submit="submitForm()" novalidate>
<input ng-model="form.value" required />
<button type="submit">Submit</button>
</form>
</div> …
Run Code Online (Sandbox Code Playgroud)更新:我添加了一个自定义指令,允许我使用动态生成的名称访问输入,但$ valid仍未定义.
我是Angular的新手(试图从jQuery转换)我发现它非常棒,但是我已经把头发拉了好几个小时并且无法弄清楚是什么导致了这个问题.
我想要实现的UI工作流程是让用户点击一个步骤,然后显示一个输入字段,他必须填写(验证是必需的,所以我试图使用ng-required/NG-MINLENGTH个).
如果它通过了验证,它应该显示一个勾号图标并激活下一步,它的工作方式相同.
现在的问题是我可以访问表单元素,但我得到的对象是一个DOM对象,它不包含$ valid属性,我需要检查表单/字段是否有效.
17:20行是:
console.log($scope.step1); //undefined
console.log(step1); //dom object
console.log(step1.value); //dom object
console.log(step1.value.$valid); //undefined
Run Code Online (Sandbox Code Playgroud)
我一直在谷歌上搜索很多关于SO的问题说我应该能够通过$ scope变量访问表单,但不幸的是我不能,虽然它可以通过简单的变量名"step1"访问(动态生成)表格名称).我也可以访问"value"命名字段,但它仍然只是一个DOM对象,因此没有$ valid可用.
JSFiddle:http://jsfiddle.net/Iber/vtvnquee/
我的问题是:
真的很想了解Angular,因为它看起来像是一个适合大型应用程序的框架以及适合我的方式.