pfModalOverlay: no way to close modal for custom validations

[a2batic]

If modal has a form and form validation depends on API response, the modal closes itself without waiting for API response and show error. There seems to be no way to stop closing of modal.

[gnehapk]

Also I am not able to access form controls in order to validate and provide error messages accordingly. For eg. I am using ng-maxlength which sets the flag {formname}{fieldname}.$error.maxlength to false but I don't see a way to access it inside the pfModalOverlay component.

[dtaylor113]

Hi @gnehapk, I updated the ngDoc example pfModalOveral to show maxLength errors:

Here is the relevant HTML in `demo-form.html':

<input type="text" name="fieldTwo" id="textInput2" class="form-control" 
       ng-model="$ctrl.modalBodyScope.inputs.second"
       ng-maxlength="$ctrl.modalBodyScope.maxLength" />

*Note: added $scope.formScope.maxLength = 6; $scope.formScope is used for $ctrl.modalBodyScope when passed into the pfModalOverlay component. I also added a name attribute to the input field.

Here is the error validation message:

  <div ng-if="demoForm.fieldTwo.$dirty && demoForm.fieldTwo.$touched">
       <div class="has-error" ng-if="demoForm.fieldTwo.$error.maxlength">
         <span class="help-block">
           Field Two exceeds max length of {{$ctrl.modalBodyScope.maxLength}}!
         </span>
       </div>
    </div>

Where demoForm is already defined as <form name='demoForm'...

[dtaylor113]

For Tendrl (Gluster Management UI) and Ceph-dashboard

[dtaylor113]

The fix/enhancement for this Issue is available in angular-patternfly v4.18.5