Using Aurelia to create a schema form

Question

Using Aurelia to create a schema form

In my project, I am utilizing Aurelia to create a dynamic form based on a JSON data. The form is being generated from a JSON structure similar to the one shown below:

Schema = [{
    'key': 'Name',
    'display': 'Name',
    'type': 'text',
    'placeholder': 'Name',
    'required': true
},
{
    'key': 'IsSubscribed',
    'display': 'Subscribed to newsletter?',
    'type': 'checkbox',
    'placeholder': null,
    'required': false
}];

The model required to fill in the form is accessible via a Web API service. So far, I have managed to successfully implement the following template.

    <template>

    <section class="au-animate">
    <h2>Edit Form</h2>
    <form class="form-group">
        <div repeat.for="item of Schema" class="form-group">
            <label if.bind="item.type === 'text' || item.type === 'checkbox'" class="control-label" for.bind="item.key">${item.display}
                <input class="form-control" id.bind="item.key" placeholder.bind="item.placeholder" type.bind="item.type" value.bind="Model[item.key]" />    
            </label>
            <label if.bind="item.type === 'textarea'">${item.display}
                <textarea placeholder.bind="item.placeholder" value.bind="Model[item.key]></textarea>
            </label>
            ...
        </div>
    </form>
    </section>

    </template>

However, I am currently encountering challenges when the Model contains another object as a property. For instance, for the Address property, I would like to include an input field specifically for City.

This leads to a scenario where item.key = "Address.City".

I am unable to bind with either (1) Model.Address.City or (2) Model['Address']['City'] since the form is dynamically generated at runtime. My aim is to use something like (3) Model['Address.City'], allowing me to utilize Model[item.key] for binding. Is there a straightforward syntax to achieve this?

An example of a similar application using Angular JS can be found at: Angular Schema Form

Thank you for any assistance provided in advance.

javascript json aurelia

Answer 1

Answer №1

One way to achieve this is by using a binding behavior that can interpret and handle the keys appropriately. This approach will enable the binding to operate similarly to other binding expressions.

For instance, consider the following:

app.html

<template>
  <require from="./dynamic-expression-binding-behavior"></require>

  <label>
    Address 1:
    <input value.bind="model & dynamicExpression:'address.address1'">
  </label>
  <label>
    Address 2:
    <input value.bind="model & dynamicExpression:'address.address2'">
  </label>
  <label>
    City:
    <input value.bind="model & dynamicExpression:key">
  </label>
  <label>
    State:
    <input value.bind="model & dynamicExpression:'address.state'">
  </label>
  <label>
    Zip:
    <input value.bind="model & dynamicExpression:'address.zip'">
  </label>
</template>

app.js

export class App {
  model = {
    address: {
      address1: '1 Main Street',
      address2: '',
      city: 'Burlington',
      state: 'VT',
      zip: '05401'
    }
  };

  key = 'address.city';
}

dynamic-expression-binding-behavior.js

import {inject} from 'aurelia-dependency-injection';
import {Parser} from 'aurelia-binding';
import {rebaseExpression} from './expression-rebaser';

@inject(Parser)
export class DynamicExpressionBindingBehavior {
  constructor(parser) {
    this.parser = parser;
  }

  bind(binding, source, rawExpression) {
    // Parse the expression provided as a string argument for the binding behavior.
    let expression = this.parser.parse(rawExpression);

    // Modify/interpret the expression
    expression = rebaseExpression(expression, binding.sourceExpression);

    // Store the original expression of the binding for future reference.
    binding.originalSourceExpression = binding.sourceExpression;

    // Set the new expression for the binding.
    binding.sourceExpression = expression;
  }

  unbind(binding, source) {
    // Restore the original state of the binding.
    binding.sourceExpression = binding.originalSourceExpression;
    binding.originalSourceExpression = null;
  }
}

Answer 2

One way to achieve this is by using a binding behavior that can interpret and handle the keys appropriately. This approach will enable the binding to operate similarly to other binding expressions.

For instance, consider the following:

app.html

<template>
  <require from="./dynamic-expression-binding-behavior"></require>

  <label>
    Address 1:
    <input value.bind="model & dynamicExpression:'address.address1'">
  </label>
  <label>
    Address 2:
    <input value.bind="model & dynamicExpression:'address.address2'">
  </label>
  <label>
    City:
    <input value.bind="model & dynamicExpression:key">
  </label>
  <label>
    State:
    <input value.bind="model & dynamicExpression:'address.state'">
  </label>
  <label>
    Zip:
    <input value.bind="model & dynamicExpression:'address.zip'">
  </label>
</template>

app.js

export class App {
  model = {
    address: {
      address1: '1 Main Street',
      address2: '',
      city: 'Burlington',
      state: 'VT',
      zip: '05401'
    }
  };

  key = 'address.city';
}

dynamic-expression-binding-behavior.js

import {inject} from 'aurelia-dependency-injection';
import {Parser} from 'aurelia-binding';
import {rebaseExpression} from './expression-rebaser';

@inject(Parser)
export class DynamicExpressionBindingBehavior {
  constructor(parser) {
    this.parser = parser;
  }

  bind(binding, source, rawExpression) {
    // Parse the expression provided as a string argument for the binding behavior.
    let expression = this.parser.parse(rawExpression);

    // Modify/interpret the expression
    expression = rebaseExpression(expression, binding.sourceExpression);

    // Store the original expression of the binding for future reference.
    binding.originalSourceExpression = binding.sourceExpression;

    // Set the new expression for the binding.
    binding.sourceExpression = expression;
  }

  unbind(binding, source) {
    // Restore the original state of the binding.
    binding.sourceExpression = binding.originalSourceExpression;
    binding.originalSourceExpression = null;
  }
}

Using Aurelia to create a schema form

Answer №1

Similar questions

Using <Redirect/> in ReactJS results in rendering of a blank page

DiscordJS bot using Typescript experiences audio playback issues that halt after a short period of time

extract information from an external JSON document

When attempting to send data to the ServiceStack RESTful service, an error message of 'Access is denied' was received

Error: Module 'electron-prebuilt' not found

Tips for Implementing {{ }} within Angular Filters in Nested ng-repeat statements

Struggling to properly implement an "Errors" Object in the state function of a React Login Form Component

Tips for adjusting the default selection in a second dropdown menu

Discovering the unique identifier of an item in Node.js is simple with these steps

Using Angular's factory method in combination with the $http service

Ways to determine if prototype methods vary

Unidentified googletagmanager detected in vendors segment

Utilizing the power of Ionic Native with AngularJS 1 for Cordova SQLite Integration

Pattern matching for ' ... '

NextJS Router delays data reloading until page receives focus

What is the best way to change CSS style for a button when clicked using JavaScript?

The Sizzle.js error, "Uncaught TypeError: undefined (reading 'expr')," is causing some trouble

The Javascript function will only initiate upon a manual reload of the page

Using Sequelize to update all values in a JSON file through an Express router.put operation

Vue js is throwing an error because it is unable to find the "buscador" property or method that is being referenced in the render function