Search code examples
angularjstwitter-bootstrapvalidationloopbackjsstrongloop

Loopback, AngularJS and validation


I followed this tutorial to create a project with Loopback and AngularJs. https://github.com/strongloop/loopback-example-angular

Now, I have an application with:

  • HTML files (with Bootstrap)
  • AngularJS controllers
  • AngularJS service (generated with syntax lb-ng server/server.js client/js/services/lb-services.js)
  • Model (located in ./common folder)
  • MongoDB backend

The model "Device" is defined in ./common/models/device.js

module.exports = function(Device) {
};

And in ./common/models/device.json

{
  "name": "Device",
  "base": "PersistedModel",
  "idInjection": true,
  "properties": {
    "name": {
      "type": "string",
      "required": true
    },
    "description": {
      "type": "string",
      "required": true
    },
    "category": {
      "type": "string",
      "required": true
    },
    "initialDate": {
      "type": "date"
    },
    "initialPrice": {
      "type": "number",
      "required": true
    },
    "memory": {
      "type": "number"
    }
  },
  "validations": [],
  "relations": {},
  "acls": [],
  "methods": []
}

In the "AddDeviceController", I have an initialization part with:

$scope.device = new DeviceToBuy({
  name: '',
  description: '',
  category: '',
  initialPrice: 0,
  memory: 8
  initialDate: Date.now()
});

And I am able to save the $scope.device when executing the following method:

  $scope.save = function() {
     Device.create($scope.device)
      .$promise
      .then(function() {
        console.log("saved");
        $scope.back(); // goto previous page
      }, function (error) {
        console.log(JSON.stringify(error));
      });
  }

When everything is valid, the model is saved in the backend. If something is not valid in the $scope.device, I receive an error from my backend. So everything is working fine.

Now, I would like to use the model to perform client-side validation before sending my model to the backend and put some "error-class" on the bootstrap controls.

I tried something in the $scope.save function before sending to the backend:

if ($scope.device.isValid()) {
  console.log("IsValid");
} else {
  console.log("Not Valid");
}

But I get an exception "undefined is not a function" --> isValid() doesn't exist. And I cannot find any example on how to execute this client-side validation.


Solution

  • LoopBack models are unopinionated and therefore do not provide client side validation out-of-box. You should use Angular validation mechanisms before calling $save.