来自json数据的AngularJS动态表单（不同类型）
发布于 2021-02-01 10:35:36
我尝试使用JSON中的数据在AngularJS中创建动态表单。我有这个工作：
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);
}
}});
这段代码有效，但是问题是 我不知道如何添加动态复选框或清单 以及如何在表单内部进行 验证 ，如下所示：
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" },
]
}
];})
预先感谢您的关注。最好的祝福！
关注者
0
被浏览
529
1 个回答
-
我已经解决了我的问题。
这是一个带有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); } } })
