Form Field Validation

Camunda 7 Topics Discussion & Questions
,
1 
Hi all,
I have an input field on my form that I want to be validated. Pls compare the following:

            <div class="form-group">
                <label for="insuranceNumber">Versichertennummmer</label>
                <div class="controls">
                    <input required="true"
                           cam-variable-name="customerNumber"
                           cam-variable-type="String"
                           name="customerNumber"
                           id="customerNumber"
                           ng-pattern="/^[0-9]{9,9}$/"
                           class="form-control" />
                    <p ng-if="insuredPersonForm.customerNumber.$invalid" style="color: red">
                          Eingegebene Versichertennummmer ist ung&uumlltig!
                    </p>
                <p class="help-block" ng-show="insuredPersonForm.customerNumber.$invalid">Versichertennummer muss 9stellig numerisch sein.</p>
                </div>
            </div>

The idea I got from here: Camunda form validation

My problem is that the invalid paragraphs are shown from the start, when the form is loaded. Even if the input field does not contain any value.

  1. Is it possible that the validation is fired only, when I submit the form?

  2. I sometimes set the input field via javascript. e.g.

                     angular.forEach($scope.insuredPersonsList, function(insuredPerson) {

                     if(insuredPerson.id == select.value) {
                         document.getElementById('customerNumber').value = insuredPerson.customerNumber;

then I need to enter the field manually and remove the last sign and add it again. Then the input field is valid. What do I need to do here? Set an attribute dirty or blur or sth?

Thank you

2

Hi,

just in case you did not discover it already, there is a much more recent documentation on embedded forms here: https://docs.camunda.org/manual/7.4/reference/embedded-forms/

To your questions:

  1. Angular validation validates non-stop. If you only want to validate the user input on submit, I recommend Javascript to do that. You can hook into the submit event and also prevent the submit there, if there are any validation errors.
  2. You should not set the value of the element directly. Instead, you should update the angular model value and let angular do the update to the view. I think the cam-variable-name directive registers the field in the form scope, so you should be able to call $scope.customerNumber = insuredPerson.customerNumber;

Does this help you?

Cheers
Sebastian

3

Hi,
doing $scope.customerNumber = insuredPerson.customerNumber; instead of document.getElementById(customerNumber).value = insuredPerson.customerNumber does have the effect that the form is filled and the validation works correct. That is exactly what I was looking for.
But now I have the effect that after selecting an element of my select box it takes approximatly 3 to 4 seconds until all input fields are filled!?
I feel much more comfortable on the backend. :slightly_smiling:

4

You could try calling $scope.$apply(); after setting $scope.customerNumber

5

Works with $scope.$apply();. Thank you.

6