Angular Dynamic Form with Dynamic Event Binding With Dynamic Function

Question

Hi I am new to angular and i need to make something that renders a form using JSON and that JSON also has all the events and functions too. This is my Html Component

    <div *ngFor="let form of forms; index as i ">
    <div *ngIf="form.type == 'input'">
        <input  type="text" value="{{ form.value }}" ("{{form.event}}") = "{{form.function}}"/>

    </div>
</div>

This is my TS file,

    @Component({
      selector: 'app-form',
      templateUrl: './form.component.html',
      styleUrls: ['./form.component.scss']
    })
    export class FormComponent implements OnInit {

      forms: any
      constructor() { }

  ngOnInit(): void {
      this.forms = [
        {
          'type' : 'input',
          'value' : '123',
          'event' : 'click',
          'function' : 'show',
        },

      ]

  }
   show(a,b){
    console.log('hello');
  }

}

I can not find a way to generate the HTML with the events and function from my JSON Array.

sample json please?

Aakash Garg
– Aakash Garg

2020-05-29 11:52:31 +00:00
Commented May 29, 2020 at 11:52 — Aakash Garg
– Aakash Garg, Commented May 29, 2020 at 11:52
posted a solution below

Aakash Garg
– Aakash Garg

2020-05-29 12:37:36 +00:00
Commented May 29, 2020 at 12:37 — Aakash Garg
– Aakash Garg, Commented May 29, 2020 at 12:37

Eliseo · Accepted Answer · 2020-05-29 11:53:49Z

2

it's not possible do in this way. Angular transpile and minifie the code, so you don't know the name of the functions

The way is that your form was

this.forms = [
        {
          'type' : 'input',
          'value' : '123',
          'event' : 'click',
          'function' : this.show,
        },

See that "function" is the function "this.show"

And your inputs can be like

<div *ngIf="form.type == 'input'">
        <input  type="text" [ngValue]="form.value" 
          (click)="form.event=='click' && form.function($event)"
          (blur)="form.event=='blur' && form.function($event)"
          (focus)="form.event=='focus' && form.function($event)"
        />
</div>

See that whe you use (event)="condition && function()", if the condition is false don't execute the function

answered May 29, 2020 at 11:53

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aakash Garg · Accepted Answer · 2020-05-29 12:31:54Z

I did reach to a solution.

Working Stackblitz :- https://stackblitz.com/edit/angular-kecqvt

I took a dummy JSON for my example.

[{
   "type":"input",
   "value":"3",
   "event":"change",
   "function":"/Function(function (value) { console.log(value); })/"
}]

I converted json into js object like :-

public forms = JSON.parse(this.formJSON, function(key, value) {
  if (typeof value === "string" &&
      value.startsWith("/Function(") &&
      value.endsWith(")/")) {
    value = value.substring(10, value.length - 2);
    return (0, eval)("(" + value + ")");
  }
  return value;
});

My HTML :-

<div *ngFor="let form of forms; index as i ">
    <div *ngIf="form.type == 'input'">
        <input  type="text" [value]="form.value" (change) = "form['event'] === 'change' && form['function']($event.target.value)" 
        (blur) = "form['event'] === 'blur' && form['function']($event.target.value)"/>
    </div>
</div>

Collectives™ on Stack Overflow

Angular Dynamic Form with Dynamic Event Binding With Dynamic Function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related