I have a form to generate JSON format in bottom we can see. I will select name and control that need to display.How ever from the JSON data which I get from this form. I need to display all the controls in another form or same form. if I select Textbox it should display textbox.
if any one knows to display or render the controls from JSON that will great helpfull.
Here is the code:
var app = angular.module('Example',[]);
app.controller("ExampleController",function ($scope){
$scope.Controls=[];
$scope.master= {};
$scope.update = function(user) {
// Example with 1 argument
debugger;
$scope.Controls.push(angular.copy(user));
$scope.master= $scope.Controls;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<body ng-app="Example">
<table class="table table-striped">
<tr>
<td style="width:60%">
<div class="panel panel-default" style="">
<div class="panel-heading">Screen Builder</div>
<div class="panel-body">
<div class="panel panel-default form-left" >
<div class="panel-body" ng-controller="ExampleController">
<div class="row">
<div class="col-md-offset-1 col-md-10" >
<form class="form-horizontal " ng-submit="update(user)">
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label >Form Name :</label>
</div>
<div class="col-md-8">
<input type="text" ng-model="user.Form">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label >Control :</label>
</div>
<div class="col-md-8 text-justify">
<div class="row">
<div class="col-md-6">
<input type="radio" name="Label" value="Label" ng-model="user.Control.type">Label
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Combo" ng-model="user.Control.type">Combo
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Edit Combo" ng-model="user.Control.type">Edit Combo
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Combo Grid" ng-model="user.Control.type">Combo Grid
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Date" ng-model="user.Control.type">Date
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Date Time" ng-model="user.Control.type">Date Time
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Number" ng-model="user.Control.type">Number
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Check Box" ng-model="user.Control.type">Check Box
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Option Button" ng-model="user.Control.type">Option Button
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label >Caption :</label>
</div>
<div class="col-md-8">
<input type="text" ng-model="user.Control.value">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<input type="submit" style="width: 60px" value="Submit">
</div>
</div>
</form>
<pre>master = {{master | json}}</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td style="width: 60%"></td>
</tr>
</table>
</body>
Here's one way of doing it - Plunker.
It's a simple example that doesn't add all the elements in the main form but it is to show you how it could be done. The idea is to have a dummy form that you append elements to.
JS
app.controller("ExampleController",function ($scope, $element){
$scope.Controls=[];
$scope.master= {};
var newForm = angular.element($element[0].querySelector('#newForm'));
$scope.update = function(user) {
// Example with 1 argument
$scope.Controls.push(angular.copy(user));
$scope.master= $scope.Controls;
if (user !== undefined) {
var element = "";
if (user.Control.type == "Label") {
if (user.Control.hasOwnProperty("value")) {
element = "<div class='col-md-6'><label>" + user.Control.value + "</label></div>";
}
else {
element = "<div class='col-md-6'><label>Label</label></div>";
}
}
else if (user.Control.type == "Check Box") {
if (user.Control.hasOwnProperty("value")) {
element = "<div class='col-md-6'><input type='checkbox'>" + user.Control.value + "</input></div>";
}
else {
element = "<div class='col-md-6'><input type='checkbox'></input></div>";
}
}
newForm.append(element)
}
};
});
Markup
<!-- New form -->
<br>
<div>
New Form:
<form id="newForm" class="form-horizontal ">
</form>
</div>
Let me know if you want to add the elements by traversing the JSON instead.
Related
I am learning AngularJS and I got a beta project to modify the exisiting model. I cannot post the below form through api. When i click on submit button, the dasboard is senseless. can some one guide me how to move further. This is Angular version:1.6.0. I have passed the ng-submit as startApproval in form element.. But it doesn't workout
index.html
<form ng-controller="RequestController" method="post" ng-submit="startApproval()">
<div class="container">
<div class="row" ng-submit>
<p class="text-info">Please create request...</p>
<!-- Left -->
<div class="col-lg-2">
<div class="panel panel-primary">
<!-- Heading -->
<div class="panel-heading">
<h4>Request</h4>
</div>
<!-- Body -->
<div class="panel-body">
<!-- process type -->
<div class="groups list list-inset">
<div class="form-group">
<label for="generic_process_id">Select process typ:</label>
<select class="form-control" id="generic_process_id" ng-model="request.approvalObject.generic_process_id" >
<option value="1" ng-show="true" >Simple Process</option>
<!-- <option ng-hide= "true" ng-disabled="true" value="2">2</option>
<option ng-hide= "true" ng-disabled= "true" value="3">3</option>
<option ng-hide= "true" ng-disabled= "true" value="4">4</option>-->
</select>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<!-- Heading -->
<div class="panel-heading">
<h4>Priority</h4>
</div>
<!-- Body -->
<div class="panel-body">
<!-- priority type -->
<div class="groups list list-inset">
<label>Select priority:</label><br>
<div class="btn-group" ng-init="request.approvalObject.priority='1'">
<label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'1'" uncheckable>Low</label>
<label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'2'" uncheckable>High</label>
</div>
</div>
<hr>
</div>
</div>
</div>
<!-- Center -->
<div class="col-lg-6">
<!-- Description part-->
<div class="panel panel-success">
<!-- Heading -->
<div class="panel-heading">
<h4>Description</h4>
</div>
<pre>{{request.approvalObject|json}}</pre>
<pre>{{request.form|json}}</pre>
</div>
</div>
<!-- Right -->
<div class="col-lg-4">
<!-- value part-->
<div class="panel panel-info">
<!-- Heading -->
<div class="panel-heading">
<h4>Value</h4>
</div>
<!-- Body -->
<div class="panel-body">
<div class="groups list list-inset">
<label class="item item-input">
<input type="text" placeholder="" name="value" ng-model="request.approvalObject.value"><b class="text-primary">{{request.approvalObject.value_currency}}</b>
</label>
<br>
</div>
</div>
<div class="panel panel-info">
<!-- Heading -->
<div class="panel-heading">
<h4>Approver</h4>
</div>
<!-- Body -->
<div class="panel-body">
<div class="groups list list-insert">
<label class="item item-input">
<input type="text" placeholder="First approver name" name="approver1_name" ng-model="request.approvalObject.approver1_name">
</label>
</div>
<!-- show second approver if process type != 1 -->
<div ng-show="secondApprover" class="groups list list-insert">
<label class="item item-input">
<input type="text" placeholder="Second approver name" name="approver2_name" ng-model="request.approvalObject.approver2_name" >
</label>
</div>
</div>
</div>
</div>
</div>
<input type="submit" value="request">
</form>
Controller.js
'use strict';
export default class RequestController {
approvalObject = {};
form = {};
secondApprover = false;
$onInit() {
this.approvalObject.generic_process_id=1;
this.approvalObject.value_currency="EUR";
this.approvalObject.priority=1;
this.form.type=1;
}
/*#ngInject*/
constructor($http, $scope, socket) {
this.$http = $http;
console.log("testentry");
}
startApproval(approvalObject) {
console.log("test");
// creator_email and name from backend
approvalObject.generic_process_id=1;
approvalObject.creator_email= "test1#example.com";
approvalObject.creator_name= "test1";
approvalObject.approver1_email= approvalObject.approver1_name+"#example.com";
approvalObject.approver2_email= approvalObject.approver2_name+"#example.com";
// wip from backend
approvalObject.approval_process_status= "wip";
approvalObject.priority= "super high";
//date_of_creation: '', -->> filled by database
approvalObject.date_of_expiration = undefined;
approvalObject.sending_tool= "Web-App";
approvalObject.submitRequest=true;
this.$http.post('/api/approvals', approvalObject);
}
}
The startApproval(approvalObject)method in your controller expecting input parametar object. but you are calling with out passing any object to the function on ng-submit in your html
you can clear the input parameter in your controller and you can access thos variables in funtion with 'this'keyword like
this.approvalObject.generic_process_id=1;
This is the form.
<div class="row" ng-controller="contactsCtrl">
<form ng-show="addFormShow">
<h3>Add Contact</h3>
<!-- Add form -->
<div class="row">
<div class="large-6 columns">
<label>Name:
<input type="text" ng-model="name" placeholder="Contact Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Email:
<input type="text" ng-model="email" placeholder="Contact Email" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Company:
<input type="text" ng-model="company" placeholder="Company Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Work Phone:
<input type="text" ng-model="work_phone" placeholder="Work Phone" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Mobile Phone:
<input type="text" ng-model="mobile_phone" placeholder="Mobile Phone" required />
</label>
</div>
<div class="large-6 columns">
<label>Home Phone:
<input type="text" ng-model="home_phone" placeholder="Home Phone" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Street Address:
<input type="text" ng-model="street_address" placeholder="Street Address" required />
</label>
</div>
<div class="large-6 columns">
<label>City:
<input type="text" ng-model="city" placeholder="City" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>State:
<input type="text" ng-model="state" placeholder="State" required />
</label>
</div>
<div class="large-6 columns">
<label>Zip Code:
<input type="text" ng-model="zipcode" placeholder="Zip Code" required />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" value="Add Contact" class="button" />
</div>
</div>
</form>
<div class="large-10 columns">
<h3>Your Contacts (3)</h3>
<table>
<thead>
<tr>
<th width="200px">Name</th>
<th width="200px">Company</th>
<th width="25%">Email</th>
<th width="25%">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
<td>{{contact.company}}</td>
<td>{{contact.email}}</td>
<td><a class="button tiny" ng-click="showEditForm(contact)">Edit</a>
<a class="button tiny alert" ng-click="removeContact(contact)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<div class="small-12 large-2 columns">
<a class="button large" ng-click="showAddForm()">+</a>
</div>
</div>
This is the controller.
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'contactsCtrl'
});
}])
.controller('contactsCtrl', ['$scope', '$firebaseArray', function($scope,$firebaseArray) {
var ref = new Firebase('https://mycontacts-1bb2d.firebaseio.com/contacts');
$scope.contacts = $firebaseArray(ref);
$scope.showAddForm = function(){
$scope.addFormShow = true;
}
}]);
This is pretty simple code. Its supposed to show the form when the user clicks on the '+' button. But I cant figure out why the ng-show directive is not working.
It works fine with your code, check if you have properly added ng-controller in your code.
DEMO
var myApp = angular.module('ReqWebApp', [])
myApp.controller('contactsCtrl', function contactsCtrl($scope) {
$scope.showAddForm = function(){
$scope.addFormShow = true;
}
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="contactsCtrl">
<form ng-show="addFormShow">
<h3>Add Contact</h3>
<!-- Add form -->
<div class="row">
<div class="large-6 columns">
<label>Name:
<input type="text" ng-model="name" placeholder="Contact Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Email:
<input type="text" ng-model="email" placeholder="Contact Email" required />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" value="Add Contact" class="button" />
</div>
</div>
</form>
<div class="small-12 large-2 columns">
<a class="button large" ng-click="showAddForm()">+</a>
</div>
</body>
</html>
The code works fine for me. I think you might have done some small error in adding controller. Refer the code below
<html ng-app='FormApp'>
<head>
</head>
<body ng-controller='contactsCtrl'>
<form ng-show="addFormShow">
<h3>Add Contact</h3>
<!-- Add form -->
<div class="row">
<div class="large-6 columns">
<label>Name:
<input type="text" ng-model="name" placeholder="Contact Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Email:
<input type="text" ng-model="email" placeholder="Contact Email" required />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" value="Add Contact" class="button" />
</div>
</div>
</form>
<div class="small-12 large-2 columns">
<a class="button large" ng-click="showAddForm()">+</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<script>
angular.module('FormApp', []).controller('contactsCtrl', ['$scope', function($scope) {
$scope.showAddForm = function() {
$scope.addFormShow = true;
}
}]);
</script>
</body>
</html>
this is my html form that have to use to get the details but when i use the required attribute in the select tag, only the first one is validated and not the second one or an other field after the select tag, for eg if i select option in the first select and click post project then there is no error about the validation, and if i dont select the data from the first select tag there is validation error popup saying that the field is required,
<form name="myForm" role="form" action="#">
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-lg-12">
<h4 style="color:darkblue">What type of project do you require?</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
<select name="drop1" class="form-control" ng-model="project.match1">
<option value="">-- Select Category --</option>
<option ng-repeat="items in serviceCategory" value="{{items.ServiceCategoryId}}">{{items.ServiceCategoryName}}</option>
</select>
</div>
<div class="col-md-6 col-lg-6">
<select class="form-control" ng-model="project.match2" name="drop2">
<option value="">-- Select Sub Category --</option>
<option ng-repeat="a in service" ng-if="a.ServiceCategoryId==project.match1">
{{a.ServiceName}}
</option>
</select>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.ServiceCategories" placeholder="Add Service Categories here" rows="3" style="resize:none; width:100%"></textarea>
</div>
</div>
</div>
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
<h4 style="color:darkblue">What is your Project about</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
Describe your Project<br>
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<input type="text" ng-model="project.DescribeProject" style="width:100%">
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
What is your Project about?
</div>
<div class="col-md-6 col-lg-6">
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.AboutProject" ng-trim="false" rows="3" cols="70" ng-maxlength="5000" style="resize:none; width:100%;"></textarea>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
Attach files
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<!--attach file code-->
<div style="height:30px; width:100%;">
</div>
</div>
</div>
<div class="row" style="margin-bottom:15px; margin-left:5px; margin-right:5px">
<div class="col-md-1 col-lg-1"></div>
<div class="col-md-10 col-lg-10">
<div class="text-right">
<button class="btn btn-default btn-primary" type="submit" ng-click="showData(project)">Post Project</button>
<button class="btn btn-default" data-dismiss="modal" aria-label="Close" style="color:black; border-color: #2e6da4">Close</button>
</div>
</div>
<div class="col-md-1 col-lg-1"></div>
</div>
</div>
</form>
The Script is
var app = angular.module("MyApp", []);
app.controller('MainCtrl', function ($scope, $http) {
$http.get('/JsonData/ServiceCategory.json').success(function (response) {
console.log("Service Category Connected");
$scope.serviceCategory = response;
});
$http.get('/JsonData/Service.json').success(function (res) {
console.log("Service Connected");
$scope.service = res;
});
$scope.showData = function (inputData) {
var Project = new Object();
Project.Category = inputData.match1;
Project.SubCategory = inputData.match2;
Project.ServiceCategories = inputData.ServiceCategories;
Project.Description = inputData.DescribeProject;
Project.AboutProject = inputData.AboutProject;
var ProjectJson = JSON.stringify(Project);
alert(ProjectJson);
}
});
I have 2 step form
on step 1 : ask user to how many input form needed
that use in < input type="number" ng-model="vm.nkeys" />`
on step 2 : want to create one input text for each with ng-model and name attribute in array form so that I can capture the every input box value; but both is not working; see the relevant code and wokrking plunker below.
<div ng-show="vm.step == 2" ng-form="vm.step2form" class="step-content body" >
<div class="text-center m-t-md">
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<input ng-model="key_desc" name="description_{{n}}" type="text" class="form-control" >
</div>
</div>
</div>
tried ng-model="key_desc[{{$index+1}}] but no success; also name=description_{{$index}} is also not working
see the demo plunker
what do I need to do?
Have a look at the sample snippet below:
<div ng-repeat="item in getNumber(key) track by $index">
<input type="text" ng-model="text[$index]" name="input_{{$index}}" />
<span ng-if="text[$index]">
- {{text[$index]}}
</span>
</div>
Refer the demo here.
See your code now:
<div ng-repeat="n in vm.getNumber(vm.nkeys) track by $index" class="form-group">
<!-- Other stuff -->
<input id="location" ng-model="key_desc[$index]" name="description_{{n}}" type="text" class="form-control" >
</div>
See you code here.
Try this
<input ng-model="key_desc['{{$index}}']" name="description_{{n}}" type="text" class="form-control" >
Set vm variable to ng-model.
(function () {
'user strict';
angular.module('app',[])
.controller('FormController', function ($log) {
var vm = this;
vm.title = 'Key Manager';
vm.step = 1;
vm.key_desc = [];
vm.submit = _submit;
function _submit(){
alert(vm.key_desc);
}
vm.next = function() {
$log.debug('clicked on next');
if(vm.step < 3 )
vm.step = vm.step + 1;
vm.getKeys=function(n){
return new Array(n);
};
}
vm.prev = function() {
$log.debug('clicked on prev');
if(vm.step > 0)
vm.step = vm.step - 1;
}
vm.hasPreviousStep = function(){
var previousStep = vm.step - 1;
return (previousStep > 0);
};
});
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap#3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="angular.js#1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<script src="script.js"></script>
</head>
<body ng-controller="FormController as vm">
<h1>{{vm.title}}</h1>
<div class="row">
<div class="col-lg-7">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Genarate Key(s)</h5>
</div>
<div class="ibox-content">
<form action="#" class="form" novalidate>
<div role="application" class="wizard clearfix">
<div class="content clearfix">
<div ng-form='vm.step1form' ng-show="vm.step == 1" class="step-content body" >
<div class="m-t-md">
<h2>Number of Keys</h2>
<div class="form-group">
<label class="col-sm-2 control-label">Number of Keys *</label>
<div class="col-sm-4">
<input type="number" min="0" max="50" id="nkeys" name="nkeys" ng-model="vm.nkeys" required class="form-control required" placeholder="How many keys required" />
</div>
</div>
</div>
</div>
<div ng-form="vm.step2form" ng-show="vm.step == 2" class="step-content body" >
<div class="text-center m-t-md">
<h2>This is step 2</h2>
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<div class="col-sm-4">
<input id="location" ng-model="vm.key_desc[$index]" name="description_{{n.name}}" type="text" class="form-control" >
</div>
</div>
</div>
</div>
</div>
<div class="actions clearfix">
<ul class="list-inline">
<li >
<button ng-disabled="vm.step=='1'" type="button" class="btn btn-w-m btn-primary" ng-click="vm.prev()">Previous</button>
</li>
<li >
<button type="button" class="btn btn-w-m btn-primary" ng-click="vm.next()" ng-disabled="!vm.step1form.$valid">Next</button>
</li>
<li >
<button class="btn btn-primary " ng-click="vm.submit()" type="button"><i class="fa fa-check"></i> Submit</button>
</li>
<li>
<button ui-sref="keyhouse.list" type="button" class="btn btn-w-m btn-warning" >Cancel</button>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
model name could be connect with controller name..using vm variable..
In your controller initialize vm.key_desc = [] in your controller..
Use an Array element as ng-model
<input ng-model="key_desc[$index]" name="description_{{n}}"
type="text" class="form-control" >
here the value of first input will be in $scope.key_desc[0], second in $scope.key_desc[1] and so on
before that, initialise $scope.key_desc = [] in your controller
I'm facing the following problem: When I try to instantiate a modal
angular.module('previewApp')
.controller('DienstleisterCtrl', function (dienstleisterRegObjService, staticDataService, $uibModal) {
var vm = this;
vm.dienstleisterTypen = staticDataService.getDienstleisterTypen();
vm.modRegObj = function (dienstleistertyp) {
dienstleisterRegObjService.vorselektiertesProdukt.typ = vm.dienstleisterTypen[dienstleistertyp];
var modalInstance = $uibModal.open({
templateUrl: 'scripts/angular/modals/templates/regform.html',
controller: 'RegFormCtrl as vm'
});
};
});
it throws in the modal controller
angular.module('previewApp')
.controller('RegFormCtrl', function (**$uibModalInstance**, dienstleisterRegObjService, staticDataService, fieldValidator) {
});
the error:
[$injector:unpr] Unknown provider: $uibModalInstanceProvider <-
$uibModalInstance <- RegFormCtrl
This is the modal:
It has two forms, one nested in the other.
<!-- Modal -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true" style="padding-right: 0px;">
<div class="modal-content">
<div class="close-modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<div class="form-horizontal" ng-form="regForm">
<fieldset>
<legend class="text-center">
<div class="panel formular-head">
<h3 class="formular-title">Registrieren</h3>
<p class="text-muted formular-description"></p>
</div>
</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="organisation">Organisation</label>
<div class="col-md-6">
<input id="organisation" name="organisation" type="text" placeholder="z.B. Muster Catering GmbH" class="form-control input-md" ng-model="vm.regObj.organisation" ng-readonly="vm.orgReadOnly" ng-change="vm.checkValue('org')" ng-required="!vm.orgReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="vorname">Vorname</label>
<div class="col-md-6">
<input id="vorname" name="vorname" type="text" placeholder="" class="form-control input-md" ng-model="vm.regObj.vorname" ng-readonly="vm.nameReadOnly" ng-change="vm.checkValue('name')" ng-required="!vm.nameReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="nachname">Nachname</label>
<div class="col-md-6">
<input id="nachname" name="nachname" type="text" placeholder="" class="form-control input-md" ng-model="vm.regObj.nachname" ng-readonly="vm.nameReadOnly" ng-change="vm.checkValue('name')" ng-required="!vm.nameReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="email">Email</label>
<div class="col-md-6">
<input id="email" name="email" type="text" placeholder="max#muster.ch" class="form-control input-md" ng-model="vm.regObj.mail" ng-required="true" ng-pattern="vm.getMailChecker();">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="natio">Nationalität</label>
<div class="col-md-6">
<select id="natio" name="nationalitaet" class="form-control" ng-model="vm.regObj.nationalitaet">
<option ng-value="vmnat" ng-repeat="vmnat in vm.nationalitaeten">{{vmnat}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="sprache">Sprache</label>
<div class="col-md-6">
<select id="sprache" name="sprache" class="form-control" ng-model="vm.regObj.sprache">
<option ng-value="vmsprache" ng-repeat="vmsprache in vm.sprachen">{{vmsprache}}</option>
</select>
</div>
</div>
<div class="form-group produkt-katalog" ng-show="!vm.regObj.produkte.length == 0">
<label class="col-md-4 control-label produkt-label"></label>
<div class="col-md-6">
<div class="" ng-repeat="vmprod in vm.regObj.produkte track by $index">
<produkt-item produkt="vmprod"></produkt-item>
</div>
</div>
</div>
<div ng-form="produktForm">
<div class="formular-together panel shadowed">
<div class="form-group">
<label class="col-md-4 control-label" for="dienstleistertyp">Dienstleistung</label>
<div class="col-md-6">
<select id="dienstleistertyp" name="dienstleistertyp" class="form-control" ng-model="vm.vorselektiertesProdukt.typ" ng-required="vm.regObj.produkte.length == 0">
<option ng-value="vmtyp" ng-repeat="vmtyp in vm.typen">{{vmtyp}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="produkt">Produkt</label>
<div class="col-md-6">
<input id="produkt" name="produkt" type="text" placeholder="z.B. Lautsprecher, Dekoration, Helfer, Stilrichtung" class="form-control input-md" ng-model="vm.vorselektiertesProdukt.produkt" ng-required="vm.regObj.produkte.length == 0 || vm.vorselektiertesProdukt.typ !== ''">
</div>
</div>
<div class="form-group">
<label class="col-md-4"></label>
<div class="col-md-6">
<button type="button" class="btn btn-default pull-right" name="submit" ng-click="vm.addProduct()" ng-disabled="produktForm.$invalid || vorselektiertesProdukt.produkt == ''">Hinzufügen</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-6">
<div class="pull-right">
<button id="abbrechen" name="abbrechen" class="btn btn-default">Abbrechen</button>
<button id="registrieren" name="registrieren" class="btn btn-default" ng-disabled="regForm.$invalid || regObj.produkte.length == 0" ng-click="vm.registrieren()">Registrieren</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Ende -->
In the app.js ui-bootstrap is declared, also in the index.html.
angular
.module('previewApp', [
'ngAnimate',
'ngSanitize',
'ngResource',
'ngTouch',
'ngMessages',
'ui.bootstrap',
'ngToast'
]);
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/angular-touch/angular-touch.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/ngToast/dist/ngToast.js"></script>
This problem gives me headache, cause I know it's just a little fault, but in the last hours i tried nearly everything an nothing changed.
Help is very appreciated. I'll post an plunkr in the answers...
OK... I've no idea why or how it works but it does.
I did the following:
I changed "controller as" in creating modal plus removed named controllers from my index.html and replaced them by $scope.
I added in dienstleister.js, where the modal is beeing created, the modalinstance.result.then functions
Now there is no error anymore. If someone has an idea why it now works i would appreciate an explanation.
Thanks for your time guys.