angularjs - reactivos - validar formulario angular 5
Angular-Formly: Agregar campos de formulario dinámicamente al hacer clic en el usuario (3)
¿Cómo haría para agregar la capacidad en el formulario para que el usuario pueda agregar más campos de entrada haciendo clic en "Agregar". Esto usando la biblioteca angular de formly.
Aquí hay un ejemplo de la característica exacta pero hecha usando solo angularjs.
Ver este Plunker
Aquí hay un ejemplo de lo que necesitas.
Como puede ver en el plunker, hay un
TextArea
que se puede crear dinámicamente al hacer clic en el botón.
Las
TextAreas
creadas también se pueden eliminar haciendo clic en el botón
remove
.
Vea el HTML a continuación
<div class="col-sm-10">
<input type="button" class="btn btn-info" ng-click="addNewChoice()" value="ADD QUESTION">
<div class="col-sm-4">
<fieldset data-ng-repeat="field in choiceSet.choices track by $index">
<textarea rows="4" cols="50" ng-model=" choiceSet.choices[$index]"></textarea>
<button type="button" class="btn btn-default btn-sm" ng-click="removeChoice($index)">
<span class="glyphicon glyphicon-minus"></span> REMOVE
</button>
</fieldset>
</div>
</div>
y el JS será como a continuación
var app = angular.module(''myApp'', []);
app.controller(''inspectionController'', function($scope, $http) {
$scope.choiceSet = {
choices: []
};
$scope.quest = {};
$scope.choiceSet.choices = [];
$scope.addNewChoice = function() {
$scope.choiceSet.choices.push('''');
};
$scope.removeChoice = function(z) {
$scope.choiceSet.choices.splice(z, 1);
};
});
El ejemplo simple también funciona eliminando en cualquier orden:
http://plnkr.co/edit/c0FbjBJkHtDYRKslz0iq?p=preview
o:
algunos html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="oneApp" ng-controller="ctrl">
<button ng-click="addNewRow()">Add row</button>
<table>
<tr ng-repeat="row in tablerows track by $id(row)">
<td ng-model="tablerows[$index]">
<input>
</td>
<td>
<button ng-click="removeRow($index)" type="button">
Delete
</button>
<td>
</tr>
</table>
</body>
</html>
script.js:
var app = angular.module(''oneApp'', []);
app.controller(''ctrl'', function($scope){
$scope.tablerows = [];
$scope.addNewRow = function () {
var row_id;
var tablerows = $scope.tablerows;
if(tablerows.length > 0){
row_id = tablerows[tablerows.length-1];
row_id = row_id +1;
}else{
row_id = 0;
}
$scope.tablerows.push(row_id);
};
$scope.removeRow = function (index) {
$scope.tablerows.splice(index,1);
};
}
);
Pongo un ejemplo simple.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,name){
var index = $scope.data.names.indexOf(name);
if($event.which == 1)
$scope.data.names.splice(index,1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<table>
<tr ng-repeat="name in data.names track by $index">
<td> <input type="text" ng-model="data.names[$index].name"></td>
<td> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"></td>
<td> <input type="button" ng-click="deleteRow($event,name)" value="Delete" ng-show="$index != 0"></td>
</tr>
</table>
<span>{{data|json}}</span>
</div>