Hi everyone I’m trying to create a form with angular-formly I have this definition:
{
"options": {
"data": {
"someData": 6
}
},
"fieldGroup": [
{
"className": "ctnStepper",
"key": "customField ",
"type": "form-section"
},
{
"className": "ctnChamp",
"key": "inputTest",
"type": "input"
}
]
}
And I want to put ng-class attribute on the inputTest field so after, the generated form would yield something like this:
<input ng-class="{ 'myClass': model. Something != somethingElse }">
I tried to do this tanks to the ngModelElAttrs but it’s hard to understand and I’m stuck here. Thank you in advance for your answer.
Augustin
I've assgned class to div, you can use as per your requirement.
ng-class="{'alert-danger':x.key=='customField', 'alert-info':x.key=='inputTest'}"
function myCtrl($scope) {
$scope.myData={
"options": {
"data": {
"someData": 6
}
},
"fieldGroup": [
{
"className": "ctnStepper",
"key": "customField",
"type": "form-section"
},
{
"className": "ctnChamp",
"key": "inputTest",
"type": "input"
}
]
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
<div ng-repeat="x in myData.fieldGroup">
<div class="alert" ng-class="{'alert-danger':x.key=='customField', 'alert-info':x.key=='inputTest'}">{{x.className}}</div>
</div>
</div>
Related
I need to display Div element if specific value exists on JSON object and I have tried using array I could success but I don't know how to do in JSON object. Simply I need to display div if value called "Channel" exists on JSON object.
Below code that I tried but it didn't work
activationTypes: [
{
"activationTypeId": 1,
"name": "SMS"
},
{
"activationTypeId": 2,
"name": "WEB"
},
{
"activationTypeId": 3,
"name": "Channel"
}
]
<div v-show="Object.values(activationTypes).includes('Channel')">
<p>test<test>
</div>
Simple Check:
activationTypes.some( item => item['name'] === 'Channel' );
Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
Use .find to search for the element by name:
new Vue({
el:"#app",
data(){
return{
activationTypes: [
{
"activationTypeId": 1,
"name": "SMS"
},
{
"activationTypeId": 2,
"name": "WEB"
},
{
"activationTypeId": 3,
"name": "Channel"
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-show="activationTypes.find(e=>e.name=='Channel')">
<p>test</p>
</div>
</div>
I am facing issue to store category SINGLES related data into an array and then use this array to display show data.Basically, I just want to store data that is only belong to category "SINGLES" from json file that I named it "data.json" into an array.Can anyone help me please. I would really appreciate that.
Index.html
<div id="app">
<div class="col-lg-4 col-sm-6" v-for="model in jsonSingleData">
<div class="beeton-models-box">
<div class="image-holder">
</div>
<div class="text-box">
<h3>{{model.title}}</h3>
<p>{{model.bedrooms}}</p>
</div>
</div>
</div>
</div>
script.js
var vm = new Vue({
el:'#app',
data:{
jsonSingleData:[]
},
created:function(){
this.fetchDataAll();
},
methods:{
fetchDataAll: function(){
var url="data.json";
axios.get(url)
.then(function(res){
res.data.models.forEach(single=>{
if(single.category=='SINGLES')
{
vm.jsonSingleData=single;
console.log(single);
}
});
});
}
The below is my json file.
data.json
{
"models": [
{
"title": "IRIS",
"project": "ABC",
"category": "SINGLES",
"bedrooms": 3
},
{
"title": "LILAC",
"project": "ABC",
"category": "DOUBLE",
"bedrooms": 4
},
{
"title": "ASTER",
"project": "ABC",
"category": "SINGLES",
"bedrooms": 4
}
]
}
Looks like your method is missing some points. Also, you are missing a } at the end.
Try this:
fetchDataAll: function(){
var vm = this;
var url="data.json";
axios.get(url)
.then(function(res){
res.data.models.forEach((single)=>{
if(single.category=='SINGLES')
{
vm.jsonSingleData.push(single);
console.log(single);
}
});
});
}
I am making angular application and building of angular dynamic form.
Here i am trying to split of form in two parts such as Person Name and Personal details..
For Person Name its working for grouping but for Personal details its not working.
The Html:
<div *ngIf="form">
<div *ngFor="let question of questions" class="form-row" [formGroup]="form">
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
<ng-container *ngIf="question.controlType === 'group' && question.children && question.children.length > 0">
<app-dynamic-group [questions]="question.children" [form]="form.controls[question.key]" [key]="question.key" [formControlName]="question.key"></app-dynamic-group>
</ng-container>
</div>
</div>
JSON:
jsonData: any = [
{
"elementType": "group",
"key": "person_name",
"children": [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "first_name",
"label": "First Name",
"type": "text",
"value": "",
"required": true,
"minlength": 3,
"maxlength": 20,
"order": 1
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "last_name",
"label": "Last Name",
"type": "text",
"value": "",
"required": true,
"order": 2
}
],
},
{
"elementType": "group",
"key": "personal_details",
"children": [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "email",
"label": "Email",
"type": "text",
"value": "",
"required": true,
"minlength": 3,
"maxlength": 20,
"order": 1
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "mobile",
"label": "Mobile",
"type": "text",
"value": "",
"required": true,
"order": 2
}
],
},
];
The working Stckblitz: https://stackblitz.com/edit/angular-x4a5b6-5uj52y
As of working everything works fine.. Already a group was made for Person name and its working fine but for Personal details i am unable to find the input boxes..
A single form needs to get split up with titles above each part thats the requirement of this form.
Here the {{question.key}} displays the name on each input boxes but i need to display only Person Name at top.. Because it is the parent title and the remaining such as First Name, Last Name are input box labels.. How to show the parent title alone in before of each part (Person Name (Has First and Last Name) , Personal Details (Has Email and Mobile))...
I would like to have order split up exactly like the below with title for each respectively.
Person Name
-> First Name
-> Last Name
Personal Details
-> Email
-> Mobile Number
If i am wrong with the above approach then kindly help me to split this https://stackblitz.com/edit/angular-x4a5b6-geesde dynamic form like the below given approach..
My form needs to look like this https://stackblitz.com/edit/angular-zc34qr but it needs to be in pure angular dynamic form and JSON loading..
Kindly help me to create a group Personal Details like the Person Name which was already created and working..
Stuck for a long duration in this kindly help me please...
I don't understand why you creates additional formGroup here:
this.form = new FormGroup({main: innerForm});
Just use formGroup you're getting from your service:
dynamic-form.component.ts
this.form = this.qcs.toFormGroup(this.questions);
dynamic-form.component.html
<app-dynamic-group [questions]="questions" [form]="form"></app-dynamic-group>
Now, you do not need to implement ControlValueAccessor on your DynamicGroupComponent. You're passing FormGroup to it and it should be enough to generate form dynamically.
dynamic-group.component.ts
#Component({
selector: 'app-dynamic-group',
templateUrl: './dynamic-group.component.html'
})
export class DynamicGroupComponent {
#Input() form: FormGroup;
#Input() questions: QuestionBase<any>[] = [];
}
dynamic-group.component.html
<div *ngFor="let question of questions" class="form-row">
<app-question *ngIf="!question.children" [question]="question" [form]="form"></app-question>
<app-dynamic-group
*ngIf="question.controlType === 'group' && question.children && question.children.length"
[form]="form.get(question.key)"
[questions]="question.children">
</app-dynamic-group>
</div>
Forked Stackblitz
I need repeat keys name from an object and values from another json object.
avis.name works but the score(model.score) doesn't want showing up. help
for info, im using angular-rateit directive
code look like:
$scope.model = [
{
"score": 5
},
{
"score": 3
},
{
"score": 2
}
]
$scope.allavispossible = [
{
"name": "presentation"
},
{
"name": "efficacite"
},
"name": "puissance"
]
<div ng-repeat="avis in allavispossible">
<span class="namecaracforvoteaddproduct">{{avis.name}}</span><ng-rate-it ng-model="model.score" max="5" step="1" star-width="25" star-height="25" class="bigstar" read-only="false" resetable="false"></ng-rate-it>
</div>
You need to change the array with each object having name and a score and change the ng-model as ng-model="avis.score"
DEMO
var app = angular.module('testApp',['ngRateIt']);
app.controller('testCtrl',function($scope){
$scope.allavispossible =[
{
"name": "presentation",
"score": 5
},
{
"name": "efficacite",
"score": 3
},
{
"name": "puissance",
"score": 2
}
];
});
<link href="https://github.com/akempes/angular-rateit/blob/master/dist/ng-rateit.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/jannunzi/educationPortal/master/public/js/ng-rateit.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<div ng-repeat="avis in allavispossible">
<span class="namecaracforvoteaddproduct">{{avis.name}}</span><ng-rate-it ng-model="avis.score" max="5" step="1" star-width="25" star-height="25" class="bigstar" read-only="false" resetable="false"></ng-rate-it>
</div>
You tried to use Array as Object: ng-model="model.score". But model - is Array, you need to use it as Array, f.e. ng-model="model[0].score"
I have created a simple form using alpacajs, as per the documentation provided by alpacajs.org we can use properties such as optionsSource, schemaSource, viewSource, dataSource for loading the external json files into our application. But what i need is i need to use only one json file for all these. I mean instead of using all these 3 different properties can i use only one parameter for loading the single json file which comes from the backend. please check my code below..
<html>
<head>
<meta charset="UTF-8">
<title>My Little Alpaca Form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="//code.cloudcms.com/alpaca/1.5.22/bootstrap/alpaca.min.js"></script>
<!-- typeahead.js https://github.com/twitter/typeahead.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/bloodhound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js"></script>
<link href="//code.cloudcms.com/alpaca/1.5.22/bootstrap/alpaca.min.css" rel="stylesheet" />
<link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id="form1"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").alpaca({
"dataSource": "/fulfiller/connector-custom-data.json",
"schemaSource": "/fulfiller/connector-custom-schema.json",
"optionsSource": "/fulfiller/connector-custom-options.json",
"viewSource": "/fulfiller/connector-custom-view.json",
"view": {
"parent": "bootstrap-edit",
"layout": {
"template": "threeColumnGridLayout",
"bindings": {
"requestedfor": "column-1",
"location": "column-2",
"shortdescription": "column-3",
"description": "column-3",
}
},
"templates": {
"threeColumnGridLayout": '<div class="row">' + '{{#if options.label}}<h2>{{options.label}}</h2><span></span>{{/if}}' + '{{#if options.helper}}<p>{{options.helper}}</p>{{/if}}' + '<div id="column-1" class="col-md-6"> </div>' + '<div id="column-2" class="col-md-6"> </div>' + '<div id="column-3" class="col-md-12"> </div>' + '<div class="clear"></div>' + '</div>'
}
},
"options": {
"fields": {
"requestedfor": {
"type": "text",
"id": "requestedfor",
"label": "*Requested For",
"typeahead": {
"config": {},
"datasets": {
"type": "remote",
"displayKey": "value",
"templates": {},
"source": "http://www.alpacajs.org/data/tokenfield-ajax1.json"
}
}
},
"location": {
"type": "text",
"label": "*Location"
},
"shortdescription": {
"type": "text",
"label": "Short Description"
},
"description": {
"type": "textarea",
"rows": 5,
"cols": 40,
"label": "Description"
}
},
"form": {
"attributes": {
"action": "#",
"method": "post"
},
"buttons": {
"submit": {
"value": "Submit",
"class": "btn btn-default"
}
}
}
}
});
});
</script>
</body>
</html>
So here in the above code i have used these urls for loading json data..
"dataSource": "/fulfiller/connector-custom-data.json"
"schemaSource": "/fulfiller/connector-custom-schema.json"
"optionsSource": "/fulfiller/connector-custom-options.json"
"viewSource": "/fulfiller/connector-custom-view.json"
So instead of using these 3 different properties can i use only one property like "oneSingleJSONSource": "oneJSONRemoteFile.json"
Can anybody provide inputs?
For Alpaca to be inialized it must have a DOM element + a config object that contains the schema, options and other properties that Alpaca already knew in its core code, so in your case this is possible if you try to modify the alpaca core code... If your objective is only to optimize resource loading you can use only one json file that contains all the configuration and input them in the alpaca initialization $(dom).alpaca(_json_data_from_loaded_file). And if you want to have only schema, options and view settings in on file you should divide the data loaded to 3 objects, 1 for schema, 1 for options and the last one for view settings.
Tell me if you want more details on achieving this.
I'll be glad to help.