Set fields mandatory on a custom widget - Modal form

[DPrasna]

Hello All,

I have a custom Modal with custom fields. I want to make the fields mandatory and show an error or alert when user is trying to submit the form without filling the values. How to achieve the same?

<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="title"><b>Title</b></label>
<input type="text" placeholder="Enter Title" class="form-control" name="title" ng-model="c.addUsr.title" required>
<!-- <input type="text" placeholder="Enter Title" class="form-control" name="title" required ng-model="c.addUsr.title"> -->
</div>
</div>

<div class="col-xs-6">
<div class="form-group">
<label for="busphone"><b>Business Phone</b></label>
<input type="text" placeholder="Enter Business Phone" class="form-control" name="busphone" ng-model="c.addUsr.busphone" required>
<!--<input type="text" placeholder="Enter Business Phone" class="form-control" name="busphone" ng-model = "c.addUsr.busiphone" >-->
</div>
</div>
</div>

<div class="modal-footer">
<!--<button type="submit" class="btn btn-primary" style="color:white;" ng-click="c.addExistinguser(n)" data-dismiss="modal">Submit</button>-->
<button type="submit" class="btn btn-primary" style="color:white;" data-dismiss="modal" ng-click="c.addExistinguser(n)">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
</div>

@Ankur Bawiskar @Allen Andreas @priyasunku @Prince Arora @Ratnakar7 

[Ratnakar7]

Hi @DPrasna ,

You can do this with adding "required" attribute in input tag, add function to the client script that will check if all the mandatory fields, and call this function with 'ng-click'.

Here is an example code snippet that shows how to implement the above:

-> HTML:

<div class="row">
  <div class="col-xs-6">
    <div class="form-group">
      <label for="title"><b>Title</b></label>
      <input type="text" placeholder="Enter Title" class="form-control" name="title" ng-model="c.addUsr.title" required>
      <span class="error" ng-show="myForm.title.$error.required">Title is required!</span>
    </div>
  </div>

  <div class="col-xs-6">
    <div class="form-group">
      <label for="busphone"><b>Business Phone</b></label>
      <input type="text" placeholder="Enter Business Phone" class="form-control" name="busphone" ng-model="c.addUsr.busphone" required>
      <span class="error" ng-show="myForm.busphone.$error.required">Business Phone is required!</span>
    </div>
  </div>
</div>

<div class="modal-footer">
  <button type="submit" class="btn btn-primary" style="color:white;" data-dismiss="modal" ng-click="c.submitForm(myForm)">Submit</button>
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
</div>

->Client Script:

$scope.submitForm = function(form) {
    if (form.$invalid) {
      angular.forEach(form.$error.required, function(field) {
        field.$setDirty();
      });
      return false;
    }
    // submit the form here
  };

If the function returns true, then submit the form, else do not submit the form.

If my response was helpful in resolving the issue, please consider accepting it as a solution by clicking on the ✅Accept solution button and giving it a thumbs up 👍. This will benefit others who may have a similar question in the future.

Thank you!

Ratnakar

[DPrasna]

I have below client controller which I forgot to attach

Could you please help with including the above client function

$scope.submitForm = function(form) {
if (form.$invalid) {
angular.forEach(form.$error.required, function(field) {
field.$setDirty();
});
return false;
}
// submit the form here
};

c.addExistinguser=function(n){

c.data.user = {value: c.data.user.name, displayValue:c.data.user.sys_id};
c.data.action = 'addexistingUser';
c.data.exUser = c.addUsr;
//console.log(c.addUsr);
//console.log(n);

c.server.update().then(function(){
c.getUserlist();
});
};

[Ratnakar7]

Hi @DPrasna ,

You can also add additional code to mark the required fields as invalid if they are empty, like the following:

c.addExistinguser = function(n) {
  // Check if the form is valid
  if ($scope.myForm.$invalid) {
    // Mark all required fields as dirty and invalid
    angular.forEach($scope.myForm.$error.required, function(field) {
      field.$setDirty();
      field.$setValidity('required', false);
    });
    // Show error or alert message
    alert("Please fill in all required fields.");
    // Stop the form from submitting
    return;
  }
  // Submit the form
  // ...
};

Thanks,

Ratnakar

[DPrasna]

Hi Ratnakar, thanks again.

I tried. However it did not work

HTML

<div class="row">
<div class="col-xs-6">
<div class="form-group">
  <label for="title"><b>Title</b></label>
  <input type="text" placeholder="Enter Title" class="form-control" name="title" ng-model="c.addUsr.title" required>
  <span class="error" ng-show="myForm.title.$error.required">Title is required!</span>
</div>
</div>

<div class="col-xs-6">
<div class="form-group">
  <label for="busphone"><b>Business Phone</b></label>
  <input type="text" placeholder="Enter Business Phone" class="form-control" name="busphone" ng-model="c.addUsr.busphone" required>
  <span class="error" ng-show="myForm.busphone.$error.required">Business Phone is required!</span>
</div>
</div>
</div>

<button type="submit" class="btn btn-primary" style="color:white;" data-dismiss="modal" ng-click="c.addExistinguser(n)">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

Client

c.addExistinguser=function(n){
if ($scope.myForm.$invalid) {
// Mark all required fields as dirty and invalid
angular.forEach($scope.myForm.$error.required, function(field) {
field.$setDirty();
field.$setValidity('required', false);
});
// Show error or alert message
alert("Please fill in all required fields.");
// Stop the form from submitting
return;
}
c.data.user = {value: c.data.user.name, displayValue:c.data.user.sys_id};
c.data.action = 'addexistingUser';
c.data.exUser = c.addUsr;
//console.log(c.addUsr);
//console.log(n);

c.server.update().then(function(){
c.getUserlist();
});
};