start-form.html

<h3>Embedded Forms Quickstart</h3>
<form role="form"
      name="variablesForm">

  <div class="row">

    <div class="col-xs-6">
      <h2>Loan Data</h2>

      <!-- Loan Type -->
      <div class="form-group">
        <label for="selectLoanType">Type of the loan</label>
        <div class="controls">
          <!--select box -->
          <select id="selectLoanType"
                  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>
        </div>

        <!-- Custom validation message for select box -->
        <p ng-if="variablesForm.loanType.$invalid" style="color: red">
          Please select a loan type.
        </p>
      </div>

      <!-- Loan Amount -->
      <div class="form-group">
        <label for="inputLoanAmount">Amount</label>
        <div class="controls">
          <input id="inputLoanAmount"
                 required
                 class="form-control"
                 cam-variable-type="Double"
                 cam-variable-name="loanAmount"
                 min="1000"
                 ng-change="calculateLoan()"
                 name="loanAmount"
                 type="number"/>
        </div>
      </div>

      <!-- Runtime in Years -->
      <div class="form-group">
        <label for="inputLoanRuntime">Runtime (Years)</label>
        <div class="controls">
          <input id="inputLoanRuntime"
                 required
                 class="form-control"
                 cam-variable-type="Double"
                 cam-variable-name="loanRuntime"
                 min="2" max="30"
                 ng-change="calculateLoan()"
                 name="loanRuntime"
                 type="number"/>
        </div>
      </div>

      <!-- 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 -->
      <div class="form-group">
        <label for="gender">Gender</label>
        <div class="controls">

          <!--select box -->
          <select id="gender"
                  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>

        </div>
      </div>

      <!-- Firstname -->
      <div class="form-group">
        <label for="inputFirstname">First Name</label>
        <div class="controls">
          <input id="inputFirstname"
                 class="form-control"
                 required
                 type="text"
                 cam-variable-name="firstname"
                 cam-variable-type="String"
                 placeholder="John"
                 ng-minlength="2"
                 ng-maxlength="20"/>
        </div>
      </div>

      <!-- Lastname -->
      <div class="form-group">
        <label for="inputLastname">Last Name</label>
        <div class="controls">
          <input id="inputLastname"
                 class="form-control"
                 required
                 type="text"
                 cam-variable-name="lastname"
                 cam-variable-type="String"
                 placeholder="Doe"
                 ng-minlength="2"
                 ng-maxlength="20"/>
        </div>
      </div>

      <!-- Email -->
      <div class="form-group">
        <label for="inputEmail">Email</label>
        <div class="controls">
          <input id="inputEmail"
                 class="form-control"
                 required
                 type="text"
                 cam-variable-name="email"
                 cam-variable-type="String"
                 placeholder="john.doe@camunda.org"
                 ng-minlength="2"
                 ng-maxlength="40"/>
        </div>
      </div>

      <!-- Address -->
      <div class="form-group">
        <label for="inputAddress">Address</label>
        <div class="controls">
        <textarea id="inputAddress"
                  class="form-control"
                  cam-variable-name="address"
                  cam-variable-type="String"
                  rows="4"></textarea>
        </div>
      </div>

    </div>

  </div>
</form>