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>