dschnelldavis / angular2-json-schema-form

Angular 2 JSON Schema Form builder
MIT License
285 stars 177 forks source link

How to pass value from property of component to layout (form definition) input field? #235

Open person2713 opened 6 years ago

person2713 commented 6 years ago

I want to pass data from method of onChanges to layout input field. I will appreciate for any help.

r3project commented 6 years ago

imo this feature isn't implemented.

person2713 commented 6 years ago

Thanks, for answer.

Alex130 commented 6 years ago

You can use a workaround : bind your whole form with an ngModel, input and output. The values put in the model will show in the form. You can update your model from onChanges or a Condition. For exemple, I have :

<json-schema-form  #form framework="material-design" language="fr-FR" [layout]="layout" loadExternalAssets="false" [schema]="guestScheme" [(ngModel)]="newGuest" (onSubmit)="submit($event)">

Note the ngModel. and in my layout :

"items": [
                        {"key": "noPork", "flex": "1 1 200px"},
                        {"key": "noMeat", "flex": "2 2 150px"}
                       ]

defined in my model as boolean (checkboxes)

this.oldP = this.newGuest.noPork;
this.oldM = this.newGuest.noMeat;

These are just copies of the initial state.

ngDoCheck() {
    if (this.oldM !== this.newGuest.noMeat) {
      this.oldM = this.newGuest.noMeat;
      this.newGuest.noPork = true ;
      this.oldP = this.newGuest.noPork;
    }

    if (this.oldP !== this.newGuest.noPork) {
      this.oldP = this.newGuest.noPork;
      this.newGuest.noMeat = false;
      this.oldM = this.newGuest.noMeat;
    }
  }

This is the actual method, I needed a special logic with the old state, but a onclick on a button or onchanges of json-schema-form works too. The form reflects the changes of the model.

person2713 commented 6 years ago

Thanks for your answer Alex130.

person2713 commented 6 years ago

Alex 130, how I can do this if I have child - parent relationship? In my case I have two component: SchemaFormComponent (selector app-schema-form) - child component that in it's html markup have tag. And AddnewTabComponent - parent component that have in it's html markup . How to make that you wrote above in this case?