Angular Schema Form not displayed - angularjs

I am using angular-schema-form to display and validate a form.
I have this code in my controller:
MyApp.controller('formCtrl', ['$scope', '$rootScope','$state', '$http',
function ($scope, $rootScope, $state, $http) {
if (ENV != "dev") {
formData = localStorage.getItem("signup.v-1.0.0.json")
$scope.signupSchema=formData.schema;
$scope.signupForm=formData.form;
$scope.signupUser=formData.model;
} else {
// load the template and cache it
$http.get("/forms/signup.v-1.0.0.json")
.then(function (response) {
console.log(response);
// template loaded from the server
$scope.signupSchema = response.data.schema;
$scope.signupForm = response.data.form;
$scope.signupUser=response.data.model;
localStorage.setItem("signup.v-1.0.0.json", response.data);
});
}
}
]);
And this in signup-v-1.0.0.json:
{
"schema":{
"type": "object",
"title": "Comment",
"properties": {
"name": {
"title": "Name",
"type": "string"
},
"email": {
"title": "Email",
"type": "string",
"pattern": "^\\S+#\\S+$",
"description": "Email will be used for evil."
},
"comment": {
"title": "Comment",
"type": "string",
"maxLength": 20,
"validationMessage": "Don't be greedy!"
}
},
"required": [
"name",
"email",
"comment"
]
},
"form":
[
"name",
"email",
{
"key": "comment",
"type": "textarea",
"placeholder": "Make a comment"
},
{
"type": "submit",
"style": "btn-info",
"title": "OK"
}
],
"model":
{
}
}
In my view:
<div class="col-md-6">
<div class="featured-box featured-box-secundary default h420">
<div class="box-content" ng-controller="formCtrl">
<h4>Inscription</h4>
<p>Inscrivez vous en 2 minutes via ce formulaire.</p>
<form sf-schema="signupSchema" sf-form="signupForm" sf-model="signupUser"></form>
</div>
</div>
</div>
I'm passing the schemaForm module to my app :
MyApp = angular.module('MyApp', ['ui.router','pascalprecht.translate','ui.bootstrap','Facebook','googleplus','mgo-angular-wizard','ui','ngMaterial','ngAria','ngAnimate','schemaForm']);
Chrome does not display code, but I have no error messages.

I found the solution.
I need to broadcast 'schemaFormRedraw' to redraw the form in the ajax load result, or after data is retrieved in local storage:
$scope.$broadcast('schemaFormRedraw');

Related

Create local json in Codepen for AngularJS

The following tutorial points to an external json file. But it is blocked by CORS policy. How can I declare the object locally in order to populate the web table?
Codepen: https://codepen.io/centem/pen/Rwbmmdy
Thank you.
var app = angular.module('myApp', []);
app.controller('myController',
function ($scope, $http) {
var request = {
method: 'get',
url: 'https://www.encodedna.com/angularjs/tutorial/birds.json',
dataType: 'json',
contentType: "application/json"
};
$scope.arrBirds = new Array;
$http(request)
.success(function (jsonData) {
$scope.arrBirds = jsonData;
$scope.list = $scope.arrBirds;
})
.error(function () {
});
});
Simply declare the variable you want with the json data:
$scope.list = [
{
"ID": "001",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "002",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "003",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "004",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "005",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "006",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "007",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "008",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "009",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "010",
"Name": "Black Vulture",
"Type": "Hawk"
}];

angularjs tree view is not working getting module error

I am trying to use angularjs for creating tree view and I am getting module error. I am trying to follow this link https://github.com/eu81273/angular.treeview
I followed the steps
added the js and css file
in the html added the
<div data-angular-treeview="true"
data-tree-id="abc"
data-tree-model="treedata"
data-node-id="id"
data-node-label="label"
data-node-children="children">
</div>
then in controller
var CIController = angular.module('CIController', ['ngMaterial', 'ngAnimate', 'ngAria', 'ngMessages', 'Alertify', 'ngFileUpload', 'angularTreeview',])
$scope.treedata =
[
{
"label": "User", "id": "role1", "children": [
{ "label": "subUser1", "id": "role11", "children": [] },
{
"label": "subUser2", "id": "role12", "children": [
{
"label": "subUser2-1", "id": "role121", "children": [
{ "label": "subUser2-1-1", "id": "role1211", "children": [] },
{ "label": "subUser2-1-2", "id": "role1212", "children": [] }
]
}
]
}
]
},
{ "label": "Admin", "id": "role2", "children": [] },
{ "label": "Guest", "id": "role3", "children": [] }
];
$scope.$watch('abc.currentNode', function (newObj, oldObj) {
if ($scope.abc && angular.isObject($scope.abc.currentNode)) {
console.log('Node Selected!!');
console.log($scope.abc.currentNode);
}
}, false);
But I am getting error in chorome console like module error. Kindly help to resolve this issue. AngularJS v1.3.15 is the version I am using.

Loading json data into angularjs ng-repeat and outside of ng-repeat from same json file

i'm new to angular and a little lost. i'm able to load the data and display it, but i'm confused about loading other data that is not part of the ng-repeat i have set up from the same json file. here is what i have so far.
i would like to not use $scope.titleName = "John Doe"; $scope.infotext = "some more info" and have this info come from within the json file.
thanks for any help you can give.
var app = angular.module("myApp", []);
app.controller('something', function ($scope, $http){
$http.get('site.json').success(function(data) {
$scope.sites = data;
$scope.titleName = "John Doe";
$scope.infotext = "some more info"
});
});
/* json file content */
[
{
"name": "tim",
"image": "/features/home-1.jpg",
"link": "http://www.bbc.co.uk"
},
{
"name": "don",
"image": "/features/home-1.jpg",
"link": "http://www.bbc.co.uk"
},
{
"name": "Mike",
"image": "/features/home-1.jpg",
"link": "http://www.bbc.co.uk"
},
{
"sub": {"titleName": "Homer", "infotext":"two"}
}
]
<body ng-app="myApp" ng-controller="something" >
<div class="wrapper">
<h1>{{titleName}}</h1>
<p class="info">{{infotext}}</p>
<div class="big" ng-repeat="site in sites ">
<a href="{{site.link}}" target="_blank">
<img src="{{site.image}}">
</a>
<h2>{{site.name}}</h2>
</div>
</div>
</body>
Change your JSON because the last object of the array is different from sites, I suggest to have a JSON like this :
{
"sites": [{
"name": "tim",
"image": "/features/home-1.jpg",
"link": "http://www.bbc.co.uk"
}, {
"name": "don",
"image": "/features/home-1.jpg",
"link": "http://www.bbc.co.uk"
}, {
"name": "Mike",
"image": "/features/home-1.jpg",
"link": "http://www.bbc.co.uk"
}],
"sub": {
"titleName": "Homer",
"infotext": "two"
}
}
You have also to modify your controller
app.controller('something', function ($scope, $http){
$http.get('site.json').success(function(data) {
$scope.sites = data.sites;
$scope.titleName = data.sub.titleName;
$scope.infotext = data.sub.infotext;
});
});

Doesn't show custom template with angularformly?

This is using angular-formly and i have created multiple-checkbox template as follows:
<script type="text/ng-template" id="multi-checkbox-template.html">
<div class="radio-group"
ng-class="{'has-error': options.formControl.$invalid}">
<label class="control-label">
{{options.label}}
{{options.required ? '*' : ''}}
</label>
<div class="radio"
ng-repeat="(key, option) in options.options">
<label>
<input type="checkbox"
formly-dynamic-name="id + '_'+ $index"
formly-custom-validation="options.validators"
id="{{id + '_'+ $index}}"
aria-describedby="{{id}}_description"
ng-value="option.value"
ng-required="options.required"
ng-model="$parent.model[$parent.options.key || $parent.index][option.name]">
{{option.name}}
</label>
<p id="{{id}}_description"
class="help-block"
ng-if="option.description">
{{option.description}}
</p>
</div>
</div>
</script>
This is config:
formlyConfigProvider.setType(
{
name: 'multi-checkbox',
templateUrl: 'multi-checkbox-template.html',
wrapper: ['bootstrapLabel', 'bootstrapHasError']
}
This is controller:
{
"key": "Q2",
"type":'multi-checkbox',
"templateOptions": {
"label": "What languages are you familiar with?",
"options": [
{ {
"name": "spanish",
"value": "spnsh"
},
{
"name": "french",
"value": "frnch"
},
{
"name": "more",
"value": "more"
}
]
}
}
];
Problem is that, doesn't show anything is the page even though error. I knew that path is correct regarding to the server response
`GET /multi-checkbox-template.html 200 1ms
This is warning i am getting,
angular-formly-bootstrap formly-field apiCheck failed! Required `label` not specified in `Argument 1/value/templateOptions`. Must be `String` https://github.com/formly-js/angular-formly/blob/6.10.0/other/ERRORS_AND_WARNINGS.md#formly-field-type-apicheck-failed
You passed:
{
"key": "Q2",
"type": "multi-checkbox",
"templateOptions": {
"to.label": "In what languages does your firm provide live chat support?",
"to.options": [
{
"name": "english",
"value": "eng"
},
{
"name": "spanish",
"value": "spnsh"
},
{
"name": "french",
"value": "frnch"
},
{
"name": "more",
"value": "more"
}
]
},
"$$hashKey": "object:592",
"data": {},
"validation": {
"messages": {}
},
"id": "formly_1_multi-checkbox_Q2_5"
}
With the types:
{
"key": "string",
"type": "string",
"templateOptions": {
"to.label": "string",
"to.options": {
"0": {
"name": "string",
"value": "string"
},
"1": {
"name": "string",
"value": "string"
},
"2": {
"name": "string",
"value": "string"
},
"3": {
"name": "string",
"value": "string"
}
}
},
"$$hashKey": "string",
"data": "Object",
"validation": {
"messages": "Object"
},
"value": "Function",
"runExpressions": "Function",
"resetModel": "Function",
"updateInitialValue": "Function",
"id": "string",
"initialValue": "undefined"
}
The API calls for:
{
"__apiCheckData": {
"strict": false,
"optional": false,
"type": "shape"
},
"shape": {
"templateOptions": {
"__apiCheckData": {
"strict": false,
"optional": false,
"type": "shape",
"error": "THIS IS THE PROBLEM: Required `label` not specified in `templateOptions`. Must be `String`"
},
"shape": {
"label": "String <-- YOU ARE MISSING THIS"
}
}
}
}
`
Please if there is any help i will be really thank you.
I think some of your references to options above should be referring to options.templateOptions instead (you can actually refer to this as to as a shortcut). For instance, options.label and options.options should be to.label and to.options. Not sure if this is the only issue though.
Also, the script tag business seems weird to me, but I always use:
template: require('path-to-my-template') and Webpack, so I can't be sure.
templateUrl in your formlyConfigProvider.setType() is not a directory link to your file.
the templateUrl is actually referring to the id attribute in your script tag
what you should do is:
formlyConfigProvider.setType(
{
name: 'multi-checkbox',
templateUrl: 'custom-template.html'
wrapper: ['bootstrapLabel', 'bootstrapHasError']
}
and in your template html file:
<script type="text/ng-template" id="custom-template.html">
<!-- your custom template should be here -->
</script>

Querying relations in loopback doesn't work via Angular SDK

I am trying to query a model relation
I have two models
1. Workers
2. Skills
Worker hasMany Skills
I can query the api via the explorer
http://localhost:3000/explorer/#!/Workers/prototype_get_skills
and /api/Worker/:id/Skills url
and it gives back a list of skills for a give Worker Id
The issue happens when i try to call the Worker.skills() method generated by Angular SDK where i get a 404 Not Found Error
Below is the Angular implementation that i have
angular.module('worker-dashboard').factory('WorkerDashboardSkillService',['Worker',
function(Worker){
function getWorkerSkills(worker){
return Worker.skills({
filter:
{
where:
{
"workerId" : worker
}
}
},function(data){
console.log(data);
},
function(err){
console.log(err);
})
}
function addWorkerSkills(worker,skill){
return Worker.skills.create(
{
"skillName": skill.name,
//TODO chabge below
"skillCategory": skill.name,
"workerId": worker
},function(data){
console.log(data);
},
function(err){
console.log(err);
})
}
return{
getWorkerSkills : getWorkerSkills,
addWorkerSkills : addWorkerSkills
}
}]);
I also tried an example loopback-getting-started-intermediate
Which has an example
$scope.reviews = Review.find({
filter: {
where: {
publisherId: $rootScope.currentUser.id
},
include: [
'coffeeShop',
'reviewer'
]
}
});
However this example is looks like for the belongsTo relation and when i tried modifying it couldn't do it
Edit : Adding Worker.json
{
"name": "Worker",
"base": "User",
"idInjection": true,
"properties": {
"workerName": {
"type": "string"
},
"workerFirstName": {
"type": "string"
},
"workerLastName": {
"type": "string"
},
"isWorkerBlackListed": {
"type": "boolean"
},
"workerBlacklistedByClient": {
"type": [
"string"
]
}
},
"validations": [],
"relations": {
"skills": {
"type": "hasMany",
"model": "Skills",
"foreignKey": "workerId"
}
},
"acls": [
{
"accessType": "EXECUTE",
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "ALLOW"
}
],
"methods": []
}
Skills.json
{
"name": "Skills",
"base": "PersistedModel",
"idInjection": true,
"properties": {
"skillName": {
"type": "string"
},
"skillCategory": {
"type": "string"
}
},
"validations": [],
"relations": {
"worker": {
"type": "belongsTo",
"model": "Worker",
"foreignKey": ""
}
},
"acls": [
{
"accessType": "EXECUTE",
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "ALLOW"
}
],
"methods": []
}
Better late than never. I experienced the same trouble today. You just need to add the angular dependency.
angular
.module('app')
//inject all the model you need
.controller('ListBooksController', ['$scope', '$state', 'Book', 'Collection', 'Author', function($scope,
$state, Book, Collection, Author) {
$scope.books = Book.find({
filter: {
include: [
'author'
//put the model you want to retrieve
]
}
});
console.log($scope.books);
}])

Resources