- 首页
- 前端开发
- 来自 json 数据的 AngularJS 动态表单(不同类型)
来自 json 数据的 AngularJS 动态表单(不同类型)
[英] AngularJS dynamic form from json data (different types)
本文介绍了来自 json 数据的 AngularJS 动态表单(不同类型)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试使用来自 JSON 的数据在 AngularJS 中创建一个动态表单.我有这个工作:
HTML
<输入动态名称=field.name"type="{{ field.type }}"placeholder="{{ field.name }}"ng-model="field.value"必需的><span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">必需!</span><span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.email">不是电子邮件!</span></p><button ng-disabled="myForm.$invalid">提交</button></表单>
JS
angular.module('angularTestingApp').controller('DynamicFormCtrl', function ($scope) {$scope.formFields = [{name: '名字',类型:'文本'},{名称:'电子邮件',类型:'电子邮件'},{名称:'密码',类型:'密码'},{name: '第二名',类型:'文本'}];}).directive("dynamicName",function($compile){返回 {限制:A",终端:真,优先级:1000,链接:功能(范围,元素,属性){element.attr('name', scope.$eval(attrs.dynamicName));element.removeAttr("动态名称");$compile(element)(scope);}}});
此代码有效,但问题是我不知道如何添加动态复选框或核对清单以及如何在表单内验证,如下所示:
angular.module('angularTestingApp')
.controller('DynamicFormCtrl', function ($scope) {
$scope.formFields = [{name: '名字',类型:'文本'},{名称:'电子邮件',类型:'电子邮件'},{名称:'密码',类型:'密码'},{name: '城市',类型:'复选框',选择:[{名称:红色"},{名称:蓝色"},{名称:绿色"},]}];})
提前感谢您的关注.最好的问候!
解决方案
我已经解决了我的问题.
这是一个带有 AngularJS 中带有验证功能的动态表单示例的 plunkr 链接
http://plnkr.co/edit/kqiheTEoGDQxAoQV3wxu?p=preview
.html
<!-- 电子邮件字段--><div ng-if="field.type=='email'" class="form-group"><label class="col-sm-2 control-label">{{field.label}}</label><div class="col-sm-6"><input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" class="form-control" required/><span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">必需!<;/span><span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.email'}}">不是电子邮件!</span>
<!-- 密码字段--><div ng-if="field.type=='password'" class="form-group" ><label class="col-sm-2 control-label">{{field.label}}</label><div class="col-sm-6"><input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" ng-minlength={{field.min}} ng-maxlength={{field.max}} class="form-control" required/><span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">必需!<;/span><span data-ng-show=" {{'!form.'+field.name+'.required && (form.'+field.name+'.$error.minlength || form.'+field.name+'.$error.maxlength)' }}">密码必须在 8 到 20 个字符之间.</span>
<!-- 选择字段--><div ng-if="field.type=='select'" class="form-group" ><label class="col-sm-2 control-label">{{field.label}}</label><div class="col-sm-6"><select data-ng-model="field.data" ng-options="option.name for option in field.options" class="form-control" required/>
<!-- 无线电场--><div ng-if="field.type=='radio'" class="form-group"><label class="col-sm-2 control-label">{{field.label}}</label><div class="col-sm-6"><div class="checkbox" ng-repeat="option in field.options" ><标签><input type="radio" data-ng-model="field.data" name="taskGroup" id="{{option.name}}" value="{{option.id}}">{{选项名称}}标签>
<!-- 复选框字段--><div ng-if="field.type=='checkbox'" class="form-group" ><label class="col-sm-2 control-label">{{field.label}}</label><div class="col-sm-6"><div class="checkbox" ng-repeat="option in field.options" ><标签><input type="checkbox" data-ng-model="option.data" name="taskGroup" id="{{option.name}}" value="{{option.id}}" >{{选项名称}}标签>
</ng-form>
<br/><button ng-disabled="myForm.$invalid" type="submit" id="submit">提交</button><br/><pre>{{entity|json}}</pre><br/></表单>
.js
app.controller('DynamicFormController', function ($scope, $log) {//我们会从 api 中得到这个$scope.entity = {name : "课程",领域:[{type: "text", name: "firstname", label: "Name" , required: true, data:""},{type: "radio", name: "color_id", label: "Colors" , options:[{id: 1, name: "orange"},{id: 2, name: "pink"},{id: 3, name: "gray"},{id: 4, name: "cyan"}], required: true, data:""},{type: "email", name: "emailUser", label: "Email" , required: true, data:""},{type: "text", name: "city", label: "City" , required: true, data:""},{type: "password", name: "pass", label: "Password", min: 6, max:20, required: true, data:""},{type: "select", name: "teacher_id", label: "Teacher" , options:[{name: "Mark"},{name: "Claire"},{name: "Daniel"},{name: "加里"}],需要:真,数据:""},{type: "checkbox", name: "car_id", label: "Cars" , options:[{id: 1, name: "bmw"},{id: 2, name: "audi"},{id: 3, name: "porche"},{id: 4, name: "jaguar"}], required: true, data:""}]};$scope.submitForm = function(){$log.debug($scope.entity);}}).directive("dynamicName",function($compile){返回 {限制:A",终端:真,优先级:1000,链接:功能(范围,元素,属性){element.attr('name', scope.$eval(attrs.dynamicName));element.removeAttr("动态名称");$compile(element)(scope);}}})
I try to create a dynamic form in AngularJS using the data from a JSON. I have this working:
HTML
<p ng-repeat="field in formFields">
<input
dynamic-name="field.name"
type="{{ field.type }}"
placeholder="{{ field.name }}"
ng-model="field.value"
required
>
<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>
<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.email">Not email!</span>
</p>
<button ng-disabled="myForm.$invalid">Submit</button>
</form>
JS
angular.module('angularTestingApp').controller('DynamicFormCtrl', function ($scope) {
$scope.formFields = [
{
name: 'firstName',
type: 'text'
},
{
name: 'email',
type: 'email'
},
{
name: 'password',
type: 'password'
},
{
name: 'secondName',
type: 'text'
}
];}).directive("dynamicName",function($compile){
return {
restrict:"A",
terminal:true,
priority:1000,
link:function(scope,element,attrs){
element.attr('name', scope.$eval(attrs.dynamicName));
element.removeAttr("dynamic-name");
$compile(element)(scope);
}
}});
This code works, but the question is that I dont know how to add dynamic checkbox or checklist and how can I validate inside the form, something like this:
angular.module('angularTestingApp')
.controller('DynamicFormCtrl', function ($scope) {
$scope.formFields = [
{
name: 'firstName',
type: 'text'
},
{
name: 'email',
type: 'email'
},
{
name: 'password',
type: 'password'
},
{
name: 'city',
type: 'checkbox',
choices: [
{ name: "red" },
{ name: "blue" },
{ name: "green" },
]
}
];})
Thank you in advance for your attention.
Best Regards!
解决方案
I have solved my problem.
This a plunkr link with one example of Dynamic Forms with Validation in AngularJS
http://plnkr.co/edit/kqiheTEoGDQxAoQV3wxu?p=preview
.html
<form name="myForm" class="form-horizontal" role="form" ng-submit="submitForm()">
<div ng-repeat="field in entity.fields">
<ng-form name="form">
<!-- TEXT FIELDS -->
<div ng-if="field.type=='text'" class="form-group">
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-6">
<input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" data-ng-model="field.data" class="form-control" required/>
<!--<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>.-->
<span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
</div>
</div>
<!-- EMAIL FIELDS -->
<div ng-if="field.type=='email'" class="form-group">
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-6">
<input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" class="form-control" required/>
<span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
<span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.email'}}">Not email!</span>
</div>
</div>
<!-- PASSWORD FIELDS -->
<div ng-if="field.type=='password'" class="form-group" >
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-6">
<input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" ng-minlength={{field.min}} ng-maxlength={{field.max}} class="form-control" required/>
<span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
<span data-ng-show=" {{'!form.'+field.name+'.required && (form.'+field.name+'.$error.minlength || form.'+field.name+'.$error.maxlength)' }}">Passwords must be between 8 and 20 characters.</span>
</div>
</div>
<!-- SELECT FIELDS -->
<div ng-if="field.type=='select'" class="form-group" >
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-6">
<select data-ng-model="field.data" ng-options="option.name for option in field.options" class="form-control" required/>
</div>
</div>
<!-- RADIO FIELDS -->
<div ng-if="field.type=='radio'" class="form-group">
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-6">
<div class="checkbox" ng-repeat="option in field.options" >
<label>
<input type="radio" data-ng-model="field.data" name="taskGroup" id="{{option.name}}" value="{{option.id}}">{{option.name}}
</label>
</div>
</div>
</div>
<!-- CHECKBOX FIELDS -->
<div ng-if="field.type=='checkbox'" class="form-group" >
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-6">
<div class="checkbox" ng-repeat="option in field.options" >
<label>
<input type="checkbox" data-ng-model="option.data" name="taskGroup" id="{{option.name}}" value="{{option.id}}" >{{option.name}}
</label>
</div>
</div>
</div>
</ng-form>
</div>
<br/>
<button ng-disabled="myForm.$invalid" type="submit" id="submit">Submit</button>
<br/>
<pre>{{entity|json}}</pre>
<br/>
</form>
.js
app.controller('DynamicFormController', function ($scope, $log) {
// we would get this from the api
$scope.entity = {
name : "Course",
fields :
[
{type: "text", name: "firstname", label: "Name" , required: true, data:""},
{type: "radio", name: "color_id", label: "Colors" , options:[{id: 1, name: "orange"},{id: 2, name: "pink"},{id: 3, name: "gray"},{id: 4, name: "cyan"}], required: true, data:""},
{type: "email", name: "emailUser", label: "Email" , required: true, data:""},
{type: "text", name: "city", label: "City" , required: true, data:""},
{type: "password", name: "pass", label: "Password" , min: 6, max:20, required: true, data:""},
{type: "select", name: "teacher_id", label: "Teacher" , options:[{name: "Mark"},{name: "Claire"},{name: "Daniel"},{name: "Gary"}], required: true, data:""},
{type: "checkbox", name: "car_id", label: "Cars" , options:[{id: 1, name: "bmw"},{id: 2, name: "audi"},{id: 3, name: "porche"},{id: 4, name: "jaguar"}], required: true, data:""}
]
};
$scope.submitForm = function(){
$log.debug($scope.entity);
}
})
.directive("dynamicName",function($compile){
return {
restrict:"A",
terminal:true,
priority:1000,
link:function(scope,element,attrs){
element.attr('name', scope.$eval(attrs.dynamicName));
element.removeAttr("dynamic-name");
$compile(element)(scope);
}
}
})
这篇关于来自 json 数据的 AngularJS 动态表单(不同类型)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文