jhanink
7/1/2016 - 8:01 AM

Add Edit Save form validation handling

Add Edit Save form validation handling

$scope.forms = {};

$scope.setForm = (formName, form) => {
  $scope.forms[formName] = form;
}

$scope.selectedEntity = {};

$scope.entityFormState = {
  fields: {
    firstName: {
      setValidity: value => {
        const field = $scope.forms.addEditEntityForm.first_name;
        const isValid = value || !!$scope.selectedEntity.first_name;
        return field.$setValidity('firstName', isValid);
      }
    },
  },
  init: () => {
    $scope.entityFormState.saveClicked = false;
    $scope.entityFormState.fields.firstName.setValidity(true);
    if ($scope.entityFormState === 'Add') {
      $scope.selectedEntity.first_name = '';
    }
  }
}

$scope.openEntityForm = () => {
  $scope.entityFormState.init();
};

$scope.closeEntityForm = () => {
  $scope.entityFormState.updateInProgress = false;
};

$scope.saveEntity = () => {
  $scope.entityFormState.updateInProgress = true;
  $scope.entityFormState.saveClicked = true;
  $scope.entityFormState.fields.firstName.setValidity();
  if (!$scope.forms.addEditEntityForm.$valid) {
    return;
  }
  const params = {};
  params.first_name = $scope.selectedEntity.first_name;
  
  let save;
  if ($scope.entityFormState.mode === 'Add') {
    save = API.entity.save(params).$promise;
  } else {
    save = API.entity.patch({uuid: $scope.selectedEntity.uuid}, params).$promise;
  }
  save.then(
    response => {
      plToast.toastSuccess(`${$scope.selectedEntity.first_name}<br/>was successfully saved`);
    },
    error => {
      plToast.toastFailure(`${$scope.selectedEntity.first_name}<br/>was successfully saved`);
      $log.error('problem saving entity', error);
    }
  );
  $scope.closeEntityForm();
}

<form name="addEditEntityForm" class="addEditEntityForm">
  <div ng-init="setForm('addEditEntityForm', addEditEntityForm)">
    <pl-input-text label="First Name" model="selectedEntity.first_name" name="first_name"></pl-input-text>
    <div class="pl-input-error" ng-show="entityFormState.saveClicked && !addEditEntityForm.first_name.$valid">
      First Name is required
    </div>
  </div>
  <div class="action-buttons">
    <dot-loader class='dot-loader' ng-if="entityFormState.updateInProgress"></dot-loader>
    <pl-input-button class="pl-button orange" ng-click="saveEntity()">Save</pl-input-button>
    <pl-input-button class="pl-button gray-outline" ng-click="closeEntityForm()">Cancel</pl-input-button>
    <pl-input-button class="pl-button bare" ng-show="selectedEntity.uuid" ng-click="deleteEntity()">Delete</pl-input-button>
  </div>
</form>