Angular create reactive form with deeply nested json - javascript

I am trying to generate Angular reactive forms using json.
my json structure is like this.
{
"name": "NationalInfo",
"field": [
{
"type": "textbox",
"key": "natInfo",
"label": "Nat Info",
"value": "",
"required": false,
"order": 1
},
{
"name": "NatInfo",
"field": [
{
"type": "textbox",
"key": "appNum",
"label": "App Num",
"value": "",
"required": false,
"order": 1
},
{
"type": "textbox",
"key": "brandyPhonetic",
"label": "Brandy Phonetic",
"value": "",
"required": false,
"order": 2
},
{
"type": "textbox",
"key": "cry",
"label": "Cry",
"value": "",
"required": false,
"order": 3
},
{
"type": "textbox",
"key": "natFinalDispDt",
"label": "Nat Final Disp Dt",
"value": "",
"required": false,
"order": 4
},
{
"type": "textbox",
"key": "pTOPhonetic",
"label": "P T O Phonetic",
"value": "",
"required": false,
"order": 5
},
{
"type": "textbox",
"key": "ptoStsCd",
"label": "Pto Sts Cd",
"value": "",
"required": false,
"order": 6
},
{
"name": "NatInfoRejectionCodes",
"field": [
{
"type": "textbox",
"key": "rejectionCode",
"label": "Rejection Code",
"value": "",
"required": false,
"order": 1
}
]
}
]
}
]
}
This is just one object in array of objects, I have multiple object same like above in that array with more nested childs.
Output which I want is like this
this.obj = {
"NationalInfo": new FormGroup({
"natInfo": new FormControl(""),
"NatInfo": new FormGroup({
"appNum": new FormControl(""),
"brandyPhonetic": new FormControl(""),
"cry": new FormControl(""),
"natFinalDispDt": new FormControl(""),
"pTOPhonetic": new FormControl(""),
"ptoStsCd": new FormControl(""),
"NatInfoRejectionCodes": new FormGroup({
"rejectionCode": new FormControl("")
})
})
})
}
this.form = new FormGroup(this.obj);
and then I want to render this in html.
I have tried all solutions available but could not do it.
Will be appreciated any help.
Thanks.

Related

Javascript object nested filtering

I have an object parsed from JSON output.
I have to use only pure JS without any 3rd part libs. Can somebody suggest a working solution to filter a specific nested object by one of its key's value. In this sample I have a few "Fields" objects which contains also nested objects.
So is there a way to filter the whole nested object inside Fields using VName value as a filter criteria? For example use "VName": "oc_data" to filter the whole object inside Fields oc_data belongs to
[{
"Id": "0050560107dd",
"Name": "Demo Range",
"AllMup": false,
"Lines": [{
"Id": "0050560107dd",
"AllMup": false,
"Fields": [{
"Id": "0050560107dd",
"Name": "Some value here",
"VName": "oc_data",
"IsRequired": false,
"Format": {
"Type": "Dictionary",
"Dictionary": {
"Name": "Main stuff",
"SysName": "da3a45de77d1",
"ValuesUrl": "https://mysityurl.com",
"Id": "0050560107dd",
},
"CalForm": []
}
}]
},
{
"Id": "0050560107dd",
"AllMup": false,
"Fields": [{
"Id": "0050560107dd",
"Name": "Some value again",
"VName": "task_stat",
"IsRequired": false,
"Format": {
"Type": "Dictionary",
"Dictionary": {
"Name": "Task stuff",
"SysName": "Tasks.TaskState",
"ValuesUrl": "https://mysecondurl.com",
"Id": "ac1f6b17f99d",
},
"CalForm": []
}
}]
}
]
},
{
"Id": "0050560107dd",
"Name": "Demo Range",
"AllMup": false,
"Lines": [{
"Id": "0050560107dd",
"AllMup": false,
"Fields": [{
"Id": "0050560107dd",
"Name": "Category",
"IsRequired": false,
"Format": {
"Type": "Dictionary",
"Dictionary": {
"Name": "Some category",
"SysName": "LitigationCategory",
"ValuesUrl": "https://myempty.com",
"Id": "902b343a9588",
},
"CalForm": []
}
}]
}]
}
]

Angular Schema Form - Require Field if Integer Field is Not Null

I am trying to create a form using the Angular JSON Schema Form. I want one field (dropdown1) to be required when another field (number1) is populated. I am able to get the following form + schema working in the SchemaForm.io Sandbox, but when I put it into my site, the dropdown field is missing.
Here is my schema:
{
"type": "object",
"properties": {
"isChecked": {
"title": "checked?",
"type": "boolean"
},
"text1": {
"title": "text1",
"type": "number",
"minimum": 0,
"maximum": 100,
"condition": "model.isChecked"
},
"number1": {
"title": "number1",
"type": "number",
"minimum": 0,
"condition": "model.isChecked"
},
"dropdown1": {
"title": "",
"type": "string",
"enum": ["Days", "Months", "Years"],
"condition": "model.isChecked"
},
"comment": {"type": "string", "Title": "Comment"}
}
}
Here is my form:
[
"isChecked",
{
"key": "text1",
"type": "decimal",
"validationMessages": {
"maximum": "text1 must be 100 or lower.",
"minimum": "text1 must be 0 or higher.",
"required": "This field is required"
},
"required": false
},
{
"key": "number1",
"type": "number",
"validationMessages": {
"minimum": "number1 must be 0 or higher."
},
"required": false
},
{
"key": "dropdown1",
"required": false,
"condition": "model.number1 === null"
},
{
"key": "dropdown1",
"required": true,
"condition": "model.number1 > 0",
"validationMessages": {
"required": "dropdown1 is required."
}
},
{
"key": "comment",
"type": "textarea"
}
]
You can use the "dependencies" property (https://json-schema.org/understanding-json-schema/reference/object.html#property-dependencies). The example requires billing_address to be present when a credit_card is provided:
{
"type": "object",
"properties": {
"credit_card": {
"type": "number"
},
"billing_address": {
"type": "string"
}
},
"dependencies": {
"credit_card": [
"billing_address"
]
}
}
This implementation supports "dependencies":
https://github.com/dashjoin/json-schema-form
You can check out the online example here:
https://dashjoin.github.io/#/example/dependencies
Here is the solution I found:
"condition": {
"functionBody": "return model.number1 === undefined && model.isChecked"
}

It is possible to make dynamic html from json ionic

I want to make dynamic html from JSON response coming from server,
For eg: Let say json response from server is
param_data: any = {
"fields": [
{ "type": "text", "name": "firstname", "label": "label", "required": true, "data": "", "frmctrlnm": "labelone" },
{ "type": "button", "name": "firstname", "label": "label two", "required": true, "data": "", "frmctrlnm": "labeltwo" },
{ "type": "input", "name": "Red", "label": "input", "required": true, "data": "", "frmctrlnm": "inputone" },
{ "type": "input", "name": "BLue", "label": "input", "required": true, "data": "", "frmctrlnm": "inputone" },
{ "type": "label", "name": "color_id", "label": "input two", "required": true, "data": "", "frmctrlnm": "inputtwo" },
{ "type": "select", "name": "select", "label": "select", "required": true, "data": "", "frmctrlnm": "select" }
]}
Based on type coming from server i wants to make html component and on click of submit i want same json with user updated data in the fields.
It is possible to achieve this ?
Thank you in advance!
You can try something like this:
let htmlString = ``;
param_data.fields.forEach(element => {
if (element.type == "text") {
htmlString +=
`<div class="form-group">
<label class="control-label col-md-4">
${element.label}:
</label>
<div class="col-md-8">
<input type="text" class="form-control" name="${element.name}" ${element.required == true? 'required':''}>
</div>
</div>`
}
});

Why data is doubled, how I can fix it?

Good afternoon.
I have required json, which contains the basic template for the layout of Adaptive Cards (bot framework).
Here's this json:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"type": "AdaptiveCard",
"speak": "",
"body": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "Все машины",
"weight": "bolder",
"isSubtle": false
},
{
"type": "TextBlock",
"text": "Внимание, вы вошли в режим тендера.",
"separator": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Подтвердить лот(ы)",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "Идет подтверждение ваших лотов, ожидайте!",
"text": "/accept",
"value": "{\"x\": \"bfVal\", \"y\": \"from value\"}"
}
}
},
{
"type": "Action.Submit",
"title": "Отменить все лоты",
"data": {
"x": "123",
"msteams": {
"type": "messageBack",
"displayText": "Идет отменение ваших лотов, ожидайте!",
"text": "/cancel",
"value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
}
}
}
]
}
I also have a loop that takes data from my source and forms another json from it.
try {
// Pull in the data from Microsoft Graph.
const client = new SimpleGraphClient(tokenResponse.token);
const me = await client.getList();
var i = 0;
while (i < me['value'].length) {
feed = {
"type": "ColumnSet",
"separator": true,
"columns": [
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"text": "Продукт",
"isSubtle": true
},
{
"type": "TextBlock",
"size": "extraLarge",
"color": "accent",
"text": me.value[i].fields.Good,
"spacing": "none"
},
{
"type": "TextBlock",
"text": "Дата: " + dateFormat(me.value[i].fields.ShipmentDateTime, 'dd-mm-yyyy'),
"spacing": "yes"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "https://png.pngtree.com/svg/20170614/engine_oil_410031.png",
"size": "medium",
"spacing": "yes"
},
{
"type": "TextBlock",
"text": " ID: " + me.value[i].fields.id,
"value": me.value[i].fields.id
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "right",
"text": "RUB",
"isSubtle": true
},
{
"type": "TextBlock",
"horizontalAlignment": "right",
"size": "extraLarge",
"color": "accent",
"text": me.value[i].fields.PricePerTon,
"spacing": "none"
},
{
"type": "Input.Toggle",
"title": "Приобрести лот",
"valueOn": "true",
"valueOff": "false",
"id": "buyGood",
"spacing": "yes"
}
]
}
]
}
tender.body.push(feed);
i++;
}
Then I combine these json.
This works well, but when you retrieve the data again, the data is doubled.
How can this be resolved?
Thanks in advance.
It looks like every time you create a new card, you are appending the JSON object you created in the while loop to your required JSON object. Consequently, the next time you try to create a new card, the data from the previous request is still stored in your required JSON object. To avoid this, create a copy of the required JSON Object and store it in a different variable before your while loop. You can use JSON.parse(JSON.stringify(obj)) to create a copy of a JSON Object.
Your code should look something like this:
// create a copy of the required JSON Object
// and store it in a new variable
const card = JSON.parse(JSON.stringify(tender));
var i = 0;
while (i < me['value'].length) {
let feed = {
"type": "ColumnSet",
"separator": true,
...
}
// push feed to `card` instead of `tender`
card.body.push(feed);
i++;
}
...
// send `card` to user instead of `tender`
await turnContext.sendActivity({
text: "Double Data Card",
attachments: [CardFactory.adaptiveCard(card)]
});

Why does my Preview Window doesn't show FormElement Content

I am trying to add a sap.ui.layout.form.Form with FormContainer and FormElements to a Preview Dialog. However, my Form and its Elements doesn't get rendered.
Click Here:
{
"Type": "sap.ui.core.mvc.JSONView",
"content": [
{
"Type": "sap.m.Button",
"id": "testitemid0",
"text": "MyTestButton",
"press": "asdf"
},
{
"Type": "sap.ui.layout.form.Form",
"id": "testitemid1",
"formContainers": [
{
"Type": "sap.ui.layout.form.FormContainer",
"id": "testitemid2",
"formElements": [
{
"Type": "sap.ui.layout.form.FormElement",
"id": "testitemid3",
"label": {
"Type": "sap.m.Label",
"id": "testitemid4",
"text": "My Test Label"
},
"fields": [
{
"Type": "sap.m.Input",
"id": "testitemid5",
"value": "My Test Input",
"placeholder": ""
}
]
}
]
}
]
}
]
}
Any Idea why it doesn't render the Form?
My sap.ui.layout.form.Form-Element simply lacks a layout:
{
"Type": "sap.ui.layout.form.Form",
"id": "testitemid1",
"layout": {
"Type": "sap.ui.layout.form.GridLayout"
},
...
}
JSBin

Categories

Resources