I want something like this-
<input type="text" id="agentsignupname" name="agentsignupname"
class="form-control" value={{typeof name!="undefined"?name:" "}}>
This peice of code is not working as it shows-
Parse error on line 14:
...rol" value={{typeof name!="undefined"?na
-----------------------^
Expecting 'CLOSE_RAW_BLOCK', 'CLOSE', 'CLOSE_UNESCAPED', 'OPEN_SEXPR', 'CLOSE_SEXPR', 'ID', 'OPEN_BLOCK_PARAMS', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', 'SEP', got 'INVALID'
Use Helpers in your app.js add
const exhbs = require('express-handlebars')
var hbs= exhbs.create({
helpers:{
name: ()=>typeof name!="undefined"?name:" "
}
and then in your template add
<input type="text" id="agentsignupname" name="agentsignupname"
class="form-control" value={{name}}""/>
Related
when i used vuetify(2.4.3) with vuejs(2.6.11) and vuetify-loader(1.7.0).
everything is fine, but the v-text-field, v-select components cannot display, when i create a page with form.
this is my code(no any error):
<template>
<v-form
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="name"
:counter="10"
:rules="nameRules"
label="Name"
required
></v-text-field>
<v-text-field
v-model="email"
:rules="emailRules"
label="E-mail"
required
></v-text-field>
<v-select
v-model="select"
:items="items"
:rules="[v => !!v || 'Item is required']"
label="Item"
required
></v-select>
<v-checkbox
v-model="checkbox"
:rules="[v => !!v || 'You must agree to continue!']"
label="Do you agree?"
required
></v-checkbox>
<v-btn
:disabled="!valid"
color="success"
class="mr-4"
#click="validate"
>
Validate
</v-btn>
<v-btn
color="error"
class="mr-4"
#click="reset"
>
Reset Form
</v-btn>
<v-btn
color="warning"
#click="resetValidation"
>
Reset Validation
</v-btn>
</v-form>
</template>
<script>
export default {
data: () => ({
valid: true,
name: '',
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 10) || 'Name must be less than 10 characters',
],
email: '',
emailRules: [
v => !!v || 'E-mail is required',
v => /.+#.+\..+/.test(v) || 'E-mail must be valid',
],
select: null,
items: [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
],
checkbox: false,
}),
methods: {
validate () {
this.$refs.form.validate()
},
reset () {
this.$refs.form.reset()
},
resetValidation () {
this.$refs.form.resetValidation()
},
},
}
</script>
this is the source of the page:
the v-text-field v-select ... only display a 'div' tag like this:
<form data-v-b5dd6ec2="" novalidate="novalidate" class="v-form">
<div><!----></div>
<div><!----></div>
<div><!----></div>
<div><!----></div>
<button type="button" class="mr-4 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default success">
<span class="v-btn__content"> Validate </span>
</button>
<button type="button" class="mr-4 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default error">
<span class="v-btn__content"> Reset Form </span>
</button>
<button type="button" class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default warning">
<span class="v-btn__content"> Reset Validation </span>
</button>
</form>
this is the source of the page
how can i use v-form and v-text-field v-select ... correctly？
other components work fine in my project, except the form elements, can anybody help me?
When I reinstall the vuetify from my vuejs project, the problem is solved
I tried a firebase read script,
if the ket is of the type 0 1 2 3 4 reads, but if it is ramdom type (M5ppDoMZ8lnqBtT8Zme) it is not read and I don't understand why?
import {gamesRef} from './firebase'
import { GameTypeEnum, PiattaformaEnum,nuovofilm } from './models/game'
export default {
firebase: {
games: gamesRef.orderByChild('titolo')
//games : gamesRef
},
data() {
return {
gameTypes: GameTypeEnum.properties,
gamePlatforms: PiattaformaEnum.properties,
nuoevo : nuovofilm,
games : gamesRef,
film: gamesRef,
// gam : gamesRef.orderByChild('titolo'),
fields: ['Indice','titolo', 'regista','locandina', 'anno','Modifica','Cancella','piattaforma'],
//fields: ['titolo', 'autore', 'anno', ''],
datas : [1,2,3,4],
// fields: ['first_name', 'last_name', 'age'],
items: [
{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ age: 89, first_name: 'Geneva', last_name: 'Wilson' }
],
newGame: {
Titolo: '',
SoftwareHouse: '',
Tipo: GameTypeEnum.FPS,
Piattaforma: PiattaformaEnum.PC
},
<b-table striped hover :items="games" :fields="fields">
<template v-slot:cell(indice)="data">
{{ data.index + 1 }}
</template>
<template v-slot:cell(locandina)>
<img :src="valore" width="100" />
</template>
<template v-slot:cell(Modifica)>
<button type="button" class="btn btn-warning">x</button>
</template>
<template v-slot:cell(Cancella)>
<button type="button" class="btn btn-danger">y</button>
</template>
<template v-slot:cell(index)="data">
{{ data.index + 1 }}
<b-btn size="sm" variant="warning">X</b-btn>
{{ data.index + 1 }}
<b-btn size="sm" variant="warning">y</b-btn>
</template>
94/5000
I have also tried with the v-for the problem seems that it doesn't understand what it has to do with key random
Many thanks in advance
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Good day, whoever reads this, thanks for taking the time to possibly assist!
Back in the day, I used to work a lot with Wordpress (PHP) and there was this plugin we used to gather metadata: Advanced Custom Fields (advancedcustomfields . com). What made it cool was that you could visually set up groups of questions (a form if you will), by selecting the types of questions and configure their setup and style (input with label in inside or outside, or, table with rows and columns specifying each key alongside which the answer would be saved against in the database).
I'm looking to build the exact same thing in Angular 8+, allowing my client to choose whatever type of field (input) they want and group them together. How do you suggest I go about this:
1) build custom components like: text input/area, radio, table, map, image, file upload, checkboxes, date/time pickers, select boxes, groups etc (each carrying conditional rules to show or not depending on some other component)... and then let the user choose the relevant parameters for each component and send them to the component ngOnInit() with #Input or a service?
2) does a similar package already exist for me to leverage such functionality quicker?
Appreciate the advice and input :)
Rgds,
Wzz
Have a look at ngx-formly. Another option is ng-dynamic-forms. These libraries have dynamically configurable input elements section.
ngx-formly code sample from their demo below:
app.component.ts
import { Component } from '#angular/core';
import {FormGroup} from '#angular/forms';
import {FormlyFieldConfig} from '#ngx-formly/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
form = new FormGroup({});
model = {};
fields: FormlyFieldConfig[] = [
{
key: 'input',
type: 'input',
templateOptions: {
label: 'Input',
placeholder: 'Input placeholder',
required: true,
}
},
{
key: 'textarea',
type: 'textarea',
templateOptions: {
label: 'Textarea',
placeholder: 'Textarea placeholder',
required: true,
}
},
{
key: 'checkbox',
type: 'checkbox',
templateOptions: {
label: 'Checkbox',
}
},
{
key: 'select',
type: 'select',
templateOptions: {
label: 'Select',
placeholder: 'Select placeholder',
required: true,
options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]
}
},
{
key: 'radio',
type: 'radio',
templateOptions: {
label: 'Radio',
required: true,
options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
]
}
}
];
onSubmit() {
if (this.form.valid) {
alert(JSON.stringify(this.model, null, 2));
}
}
}
app.component.html
<div class="header">
<img src="https://raw.githubusercontent.com/ngx-formly/ngx-formly/v5/logo.svg?sanitize=true" alt="" width="72" height="72">
<h4 class="mat-h2">Angular Formly Material</h4>
</div>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<formly-form
[form]="form"
[model]="model"
[fields]="fields">
</formly-form>
<button type="submit" color="primary" mat-raised-button>
Submit
</button>
<button type="reset" color="warn" mat-raised-button>
Reset
</button>
</form>
I'm using Chameleon in the Pyramids Framework and want to repeat nested list while rendering the template.
My minimized HTML-Code is:
1. <ul>
2. <li tal:repeat="item items">
3. <input tal:attributes="id item.id; onclick item.url">
4. <label tal:repeat="premise item.values" tal:attributes="for item.id; id premise.id">
5. <label tal:replace="premise.title"/>
6. </label>
7. <label tal:attributes="for item.id" tal:content="item.title"/>
8. </li>
9. </ul>
Whereby I got the following json-Data
[{
'url': 'location.href="http://..."',
'values':
[{
'id': '70',
'title': 'some title 1'
}],
'attitude': 'justify',
'id': '68',
'title': 'some title 2'
}, {
'url': 'null',
'values':
[{
'id': '0',
'title': 'some title 3!
}],
'attitude': 'justify',
'id': '0',
'title':
'some title 4'
}]
If I kill HTML-lines 4.-6., everything is fine, otherwise Pyramid/Chameleon throws:
File "/usr/local/lib/python3.4/dist-packages/chameleon/tal.py", line 471, in __call__
iterable = list(iterable) if iterable is not None else ()
TypeError: 'builtin_function_or_method' object is not iterable
Anyone some idea?
Thanks to #pyramid in the IRC i got the first hint, which is mentioned in the comment. But..never ever name a key 'value' or 'values'!
I am new in node js.
I am using Express JS and Hogan JS template engine. I know we can not use logic in this template but I need to execute a if statement within for loop statement in view code, to generate table fields.
I tried so many things, Even I follow this links Hogan js also.
But there is only if or for example is give there is no solution for both at a same time.
My data is in this Form
[
{
buln_id: 1,
name: 'Himanshu',
cname: 'India',
created_date: 'Tue Jul 07 2015',
state_name: 'Chandigarh',
city_name: 'Chandigarh',
locality_name: 'Behlana',
office_type_name: 'SCO',
office_number: '1234',
floor_no: 'ground floor',
section: 'a',
owner_name: 'RAvi',
mob_no: '123456789',
email_name: 'aaa#gmail.com',
web_name: 'sss.com',
landmark: 'sss',
bus_info: 'IT',
service: 'sss',
pay_details: 'Cash',
net_surrfing: 'a',
verification: 1
},
{
buln_id: 5,
name: 'User1',
cname: 'India',
created_date: 'Sat Aug 01 2015',
state_name: 'Chandigarh',
city_name: 'Chandigarh',
locality_name: 'Maloya',
office_type_name: 'SCF',
office_number: 'a',
floor_no: 'Ground Floor',
section: 'a',
owner_name: 'a',
mob_no: '123456789',
email_name: 'a#gmail.com',
web_name: 'a',
landmark: 'a',
bus_info: 'aa',
service: 'a',
pay_details: 'cash',
net_surrfing: 'mobile',
verification: 1
}
]
Here I want to generate a table according to the data and where is the verification is 1. i want to put check sign else put cross sign.
Please anyone help me I m new in this field.
Thanks in Advance.
You tried This
<table>
<thead>
<tr>
<th>Owner Name</th>
<th>Address</th>
<th>Contact</th>
<th>Bussiness info</th>
<th>User</th>
<th>Created Time</th>
<th>Verification</th>
</tr>
</thead>
<tbody>
{{#allRecords}}
<tr>
<td>{{owner_name}}</td>
<td>{{office_type_name}}-{{office_number}}, {{locality_name}}
{{city_name}}, {{state_name}}, {{cname}}</td>
<td>{{mob_no}}<br>{{email_name}}</td>
<td>{{service}}</td>
<td>{{name}}</td>
<td>{{created_date}}</td>
{{#verification}}
<td><i class="fa fa-check fa-2x green"></i></td>
{{/verification}}
{{^verification}}
<td><i class="fa fa-exclamation-triangle fa-2x red"></i></a></td>
{{/verification}}
</tr>
{{/allRecords}}
</tbody>
</table>