I have a problem respect to camunda with angular. In this case, I writed te form embedded with form inject angular, but when i put the code of source of javascript, the angular module, it is not working in the camunda web at the time of execute the project. This is the code.
start-form.html
Embedded Forms Quickstart
<div class="row">
<div class="col-xs-6">
<h2>Loan Data</h2>
<!-- Loan Type -->
<form-group>
<label for="selectLoanType">Type of the loan</label>
<controls>
<!--select box -->
<select required class="form-control" name="loanType" cam-variable-name="loanType"
cam-variable-type="String" ng-change="calculateLoan()">
<option value="mortage" checked>Mortage Loan (5%)</option>
<option value="cashAdvance">Cash Advance (10%)</option>
</select>
</controls>
</form-group>
<!-- Custom validation message for select box -->
<p ng-if="variablesForm.loanType.$invalid" style="color: red">
Please select a loan type.
</p>
</div>
<!-- Loan Amount -->
<form-group>
<label for="inputLoanAmount">Amount</label>
<controls>
<input required class="form-control" cam-variable-type="Double" cam-variable-name="loanAmount" min="1000"
ng-change="calculateLoan()" name="loanAmount" type="number" />
</controls>
</form-group>
<!-- Runtime in Years -->
<form-group>
<label for="inputLoanRuntime">Runtime (Years)</label>
<controls>
<input required class="form-control" cam-variable-type="Double" cam-variable-name="loanRuntime" min="2"
max="30" ng-change="calculateLoan()" name="loanRuntime" type="number" />
</controls>
</form-group>
<!-- calculate monthly payment -->
Projected monthly payment:
<p ng-if="monthlyPayment" class="alert alert-success">
{{monthlyPayment}}€ at {{interest}}% interest rate.
</p>
<p ng-if="!monthlyPayment" class="alert alert-danger">
Invalid selection.
</p>
<!-- The following code demonstrates use of custom scripting.
The 'cam-script' directive makes sure the the script is loaded and can bind to the angular $scope for the form.
Access to form fields is provided through $scope.variablesForm.
-->
<script cam-script type="text/form-script">
$scope.calculateLoan = function() {
var form = $scope.variablesForm;
if(!form.loanType.$valid || !form.loanAmount.$valid || !form.loanRuntime.$valid) {
$scope.monthlyPayment = undefined;
} else {
var loanAmount = form.loanAmount.$modelValue;
var years = form.loanRuntime.$modelValue;
var loanType = form.loanType.$modelValue;
var interestRate = 0;
if(loanType == "mortage") {
interestRate = 0.05;
} else if(loanType == "cashAdvance") {
interestRate = 0.10;
}
$scope.interest = 100 * interestRate;
// calculate monthly payment using special formula provided by Bobby G
$scope.monthlyPayment = Math.round((loanAmount * ((Math.pow((1+interestRate),years)*interestRate) / (Math.pow((1+interestRate),years)-1))) * (1/12));
}
}
</script>
</div>
<div class="col-xs-6">
<h2>Contact Data</h2>
<!-- Gender -->
<form-group>
<label for="gender">Gender</label>
<controls>
<!--select box -->
<select class="form-control" cam-variable-name="gender" cam-variable-type="String"
ng-change="calculateLoan()">
<option value="m" checked>Mr.</option>
<option value="f">Mrs.</option>
</select>
</controls>
</form-group>
<!-- Firstname -->
<form-group>
<label for="inputFirstname">First Name</label>
<controls>
<input class="form-control" required type="text" cam-variable-name="firstname" cam-variable-type="String"
placeholder="John" ng-minlength="2" ng-maxlength="20" />
</controls>
</form-group>
<!-- Lastname -->
<form-group>
<label for="inputLastname">Last Name</label>
<controls>
<input class="form-control" required type="text" cam-variable-name="lastname" cam-variable-type="String"
placeholder="Doe" ng-minlength="2" ng-maxlength="20" />
</controls>
</form-group>
<!-- https://angularjs.org/ -->
<!-- Email -->
<form-group>
<label for="inputEmail">Email</label>
<controls>
<input class="form-control" required type="text" cam-variable-name="email" cam-variable-type="String"
placeholder="john.doe@camunda.org" ng-minlength="2" ng-maxlength="20" />
</controls>
</form-group>
<!-- Address -->
<form-group>
<label for="inputAddress">Address</label>
<controls>
<textarea class="form-control" cam-variable-name="address" cam-variable-type="String" rows="4"></textarea>
</controls>
</form-group>
</div>
</div>
component.js
angular.module(‘components’, [])
.directive(‘form-group’, function() {
return {
restrict: ‘E’,
transclude: true,
scope: {},
template:
‘
’ +
‘
’,‘
replace: true
};
})
.directive(‘datosNombre’, function() {
return {
restrict: ‘E’,
transclude: true,
scope: {},
template:
‘
’ +
‘<input class=“form-control”’ +
‘required’+
‘type=“text”’ +
‘ng-minlength=“2”’ +
‘ng-maxlength=“20”/>’ +
‘
’,‘<input class=“form-control”’ +
‘required’+
‘type=“text”’ +
‘ng-minlength=“2”’ +
‘ng-maxlength=“20”/>’ +
‘
replace: true
};
})
.directive(‘controls’, function() {
return {
restrict: ‘E’,
transclude: true,
scope: {},
template:
‘
’ +
‘
’,‘
replace: true
};
})
The component.js not found in the start-form.html. What is the problem respect this?