I am using angular-schema-form to display my json data in UI, which works fine as expected.
https://github.com/json-schema-form/angular-schema-form
I wanted a material design for my page, so I used angular-schema-form-material decorator.
https://github.com/json-schema-form/angular-schema-form-material
Example code:
app.js:
require("angular-schema-form")
require("angular-schema-form-material")
require('angular-messages')
require('angular-material')
require('angular-ui-ace')
require('tv4')
require('angular-material/angular-material.css')
var app = angular.module('myApp', [
"schemaForm",'ngMessages', 'ngMaterial', 'ui.ace' ])
controller.js
var signalSchema = { /* Actual schema definition */};
var signalForm = ['*'];
var signalData = {/* Actual json data from DB */ };
index.html
<form name="signalsForm " layout="column" class="canOverviewSignals " sf-schema="signalSchema"
sf-form="signalForm " sf-model="signalData" sf-options="{validateOnRender: true} ">
</form>
The form is rendered properly and validation messages are displayed without material decorator. But on including the decorator the validation messages are not displaying. For example when a 'required' value is not entered, the error message 'field is required' is not displayed when the decorator in included. The below error message is displayed in browser console.
View Console error message here
Related
i want to pass data from server to the same page if there is an error in the POSTED data.
i have two routes , one route to display the contents and the other route for adding new content. i am using pug as view.
form for the new content is :
extends layout
block content
form(action="/create", method="POST")
h2= title
p
| Text :
input(type="text", name="text")
input(type="submit")
whenever i click the submit button the value in the input is posted
here's the node route.post() code :
router.post('/create' ,function(req,res,next){
if(req.body.text === ''){
res.send("empty")
}else{
contents.push(text: req.body.text )
res.redirect('/')
}
} )
currently if i submit the form without any input value , it will send "empty" msg in a blank page.
What I want is that if the input value is empty, rather than sending "empty" in a blank page i want to send "empty" msg to the same Form page and show anywhere.
like this :
thank you : ) ......
We must use a variable to indicate there is an error. For example:
View
extends layout
block content
form(action="/create", method="POST")
h2= title
p
| Text :
input(type="text", name="text")
input(type="submit")
h2= error
Controller
router.post('/create' ,function(req,res,next){
if(req.body.text === ''){
res.render("your_view_name_here", { error: "empty" })
}else{
contents.push(text: req.body.text )
res.redirect('/')
}
})
I have a webpage that takes form details, POSTS the data and should then show the results. I'm using express for my routing.
This all works fine by resending the data with the HTML template after the POST but I think there must be a better way by hiding the "results" HTML section then just showing it once the data is known from the form. I've shown a cutdown version of my pages below.
On first load, the page says "your result is undefined", which I would expect but is ugly.
I could remove the "result" section and create a 2nd HTML page to resend from the POST route with it in which would work but I think there must be a better way.
I want to hide the result section on 1st page load then make it appear on the button submit with the result data. I can get the section hide/unhide but I can't get the data results back to display them. On button submit the form results just appear in the weburl www.mywebsite.com/?data almost like a GET request
I have tried using FormData and npm 'form-data' in a POST but can't get it working following these examples https://javascript.info/formdata and https://www.npmjs.com/package/form-data.
My structure in Node is
Router.js file
return res.send(htmlFormTemplate({}));
});
router.post('/css',
[],
async (req, res) => {
let {data} = req.body;
///
result= do some calculation on {data}
///
return res.send(htmlFormTemplate({result}));
});
The htmlFormTemplate is a js file
module.exports = ({result}) => {
return `
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form class="box" method ="POST">
<inputname="data" />
<button>Submit</button>
</form>
<script>
///tried form processing here
</script>
<section id="Results">
<ul><li>Your result is ${result}</li></ul>
</section>
</body>
</html>
`;
};
I'm self-taught and new so hope this makes sense and thanks for any help/ideas
You can check if the result variable is null before it gets to the section div:
${ result === null ? '' :
`<section id="Results">
<ul><li>Your result is ${result}</li></ul>
</section>`}
Like this, it wont show the result div if result if null.
There is a very simple to solve this problem,
just use some templating engine for ex EJS, its very easy to use and will help you better,
and your result is undefined because your using a promise and it might have happened that the response might have not come and you loaded the page. Just use await
return await res.send(htmlFormTemplate({result}));
I want to display items from the database which I already log the result to the console. The console displays the result. but handlebars not displaying data.
This is controller
exports.createCategory = function(req, res, next){
knex('product_category')
.select()
.then(function(errors, result){
res.render('administration/category', { result, errors });
});
}
This is my router
router.get('/category', adminControllers.createCategory);
and this is my handlebar
<div class="col-md-4 col-lg-4">
{{#each result}}
<h1>{{category_name}}</h1>
{{/each}}
</div>
Just do debugging 101.
Add debug prints and check that you get correct data from DB and that it even executes.
Add to template some field to show you error too. Now if error is returned from query, nothing is shown.
Also add some static test attribute that you pass to template and print it to make sure that you are using handlebars template correctly.
I later got it.
Its the knex query.
after studying the knex docs and some online resources, I discovered I can also do this
knex('table').then(function(result)){
res.render('/', {result});
}
but I don't why this didn't work
knex('table').select().then(function(result)){
res.render('/', {result});
}
i wanna to access at my var tab in my console on front
this is my backend code
let tab= global.queue.GetListOfTraitement();
res.render('index', { title: 'Express', test: tab});
the result in backend console
[ status {
Type: 'File',
NomFichier: 'F1504365806Mcmhs784.avi',
Depart: 1504880910657 },
status {
Type: 'File',
NomFichier: 'F1504364893Euyza324.avi',
Depart: 1504881249064 } ]
my pug file
extends layout
block content
h1= title
p Welcome to #{test}
h2= title
script.
console.log(test);
div
div
my result web page
Express
Welcome to [object Object]
Express
my result in console web
ReferenceError: test is not defined
my object is send has string [object Object] i can't acces of property of my object.
Can you help me please?
i have the solution, i can't show the index number with my console on backend, now i know i have index number
block content
h1= title
p Welcome to #{test[0].Type}
h2= title
table
But i always don't know how to pass object from backend to frontend.
You need to convert it to a string, with JSON.Stringify() then you can display the content of the object.
I am using expressJS, Node and Handlebars.
In my post function I have the following:
routes.js
req.assert("referenceNumber", "Enter ...").notEmpty();
req.assert("yourPostcode", "Enter ...").notEmpty();
var errors = req.validationErrors(true);
if (errors) {
res.render('<page>/index', {
title: "<title>",
errors: errors
});
} else {
// Redirection
}
index.hbs
{{#if errors}}
<ul>
{{#each errors}}
<li>{{this.msg}}</li>
{{/each}}
</ul>
{{/if}}
This outputs a list of errors on submission which is great. The problem is I need the error message located next to the form field as well as.
So ideally I can target each error by name e.g. "referenceNumber", "yourPostcode".
I have thought about maybe having a variable inside the routes.js like so:
if (errors) {
res.render('<page>/index', {
title: "<title>",
referenceNumber: <something>,
yourPostcode: <something>
});
And perhaps be able to do something funky this way.
It would also be very good associating an id with each error message to act as an anchor link to each error form field.
Totally stumped with this one, and would really appreciate some help.