mostrar - recorrer array de objetos javascript

Forma dinámica AngularJS a partir de datos json(diferentes tipos)

Question

Intento crear una forma dinámica en AngularJS usando los datos de un JSON. Tengo esto funcionando:

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);
}
}});

Este código funciona, pero la pregunta es que no sé cómo agregar una casilla de verificación dinámica o una lista de verificación y cómo puedo validar el formulario, algo como esto:

angular.module(''angularTestingApp'')

.controller (''DynamicFormCtrl'', función ($ 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" },
]
}
];})

Gracias de antemano por su atención. ¡Atentamente!

Answer 1

¿Qué le parece utilizar http://angular-formly.com/#/ si no se ajusta a sus necesidades de un formulario html generado por el modelo JSON con todo lo archivado de una manera personalizable?

Answer 2

He solucionado mi problema.

Este es un enlace plunkr con un ejemplo de formularios dinámicos con validación en 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);
}
}
})

Answer 3

Puede usar ngIf para saber si debe mostrar una casilla de verificación o una entrada de texto, algo como esto:

<p ng-repeat="field in formFields">
<input
ng-if="field.type != ''checkbox''"
dynamic-name="field.name"
type="{{ field.type }}"
placeholder="{{ field.name }}"
ng-model="field.value"
required
>
<input
ng-if="field.type == ''checkbox''"
ng-repeat="choice in choices"
type="checkbox"
dynamic-name="field.name"
ng-value="choice.name"
>
<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>