Passing data to widget?

Hi,

i will use your great library to generate forms in an ionic app (ionicframework.com).

My template:

<sf-form
  [schema]="schema"
  [actions]="schemaActions"
  [model]="myModel"
  (onChange)="onChange($event)">
</sf-form>

Home component:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  imageMetaData = {
    imageName: '',
    imagePath: ''
  };

  filename: string = 'test.jpeg';

  myModel = { };

  schema = {
    "$schema": "http://json-schema.org/draft-04/schema#",
    "properties": {
      "title": {
        "label": "Title",
        "type": "string",
        "description": "Title"
      },
      "description": {
        "label": "Description",
        "type": "string",
        "description": "Description",
        "minLength": 6
      },
      image: {
        "label": "Foto",
        "type": "string",
        "widget": "image",
        "buttons": [{
          "id": "takeFoto",
          "block": true,
          "outline": true,
          "label": "Take a Foto!"
        }]
      }
    },
    "required": ["title", "description", "image"],
    "buttons": [{
      "id": "submit", // the id of the action callback
      "label": "Submit" // the text inside the button
    }],
    "fieldsets": [{
      "title": "General Information",
      "fields": ["title", "description"]
    }, {
      "title": "Foto",
      "fields": ["image"]
    }
    ]
  };

  schemaActions = {
    "takeFoto": () => {
      this.takeFoto();
    },
    "submit": (form, options) => {
      debugger;
    }
  }

  constructor(public navCtrl: NavController,
              private camera: Camera,
              private file: File,
              private toastCtrl: ToastController) {
  }

  onChange(event: Event) {
    console.log(event);
  }

  takeFoto() {
    //capturing foto on device and sets imagePath and imageName ...
    this.imageMetaData.imagePath = ...;
    this.imageMetaData.imageName = ...;
  }
}

I created a new Widget:

template:

<ion-item>
  <ion-label stacked>Name of file</ion-label>
  <ion-input type="text"
             [(ngModel)]="filename"
             [formControl]="control"
             [readonly]="true">
  </ion-input>
</ion-item>

and the component:

export class IonImageWidget extends ControlWidget implements AfterViewInit {

  filename: string;

  constructor() {
    super();
  }

  ngAfterViewInit() {
    super.ngAfterViewInit();
    //Only for testing
    this.filename = 'filename.jpg';
  }
}

1. How can i access the json-model (myModel) if the form is „submitted"?
2. How can i pass the file path and file name from the takeFoto() method to the Widget or do I have to put the „takeFoto logic“ into the widget itself?
3. How can i update the json model to include the filename/path after capturing the foto?

[ebrehault]

File inputs are now supported (see https://github.com/makinacorpus/angular2-schema-form/issues/41), it will be part of the next release.

[jackrvaughan]

I struggled extending a custom widget for a File Object instead of base64 as @big-r81 seems to have accomplished. For anyone else who might be struggling, I had to remove this line from the original FileWidget:

this.filedata.data = btoa(this.reader.result);

Here is my full extended file widget:

import { Component, AfterViewInit } from '@angular/core';

import { FileWidget } from 'ngx-schema-form';

@Component({
  selector: 'custom-file-widget',
  template: `<div class="widget form-group">
	<label [attr.for]="id" class="horizontal control-label">
		{{ schema.title }}
	</label>
    <span *ngIf="schema.description" class="formHelp">{{schema.description}}</span>
  <input [name]="name" class="text-widget file-widget" [attr.id]="id"
    [formControl]="control" type="file" [attr.disabled]="schema.readOnly?true:null"
    (change)="onFileChange($event)">
	<input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">
</div>`
})
export class CustomFileWidgetComponent extends FileWidget implements AfterViewInit {

  ngAfterViewInit() {
    // OVERRIDE ControlWidget ngAfterViewInit() as ReactiveForms do not handle
    // file inputs
    const control = this.control;
    this.formProperty.errorsChanges.subscribe((errors) => {
      control.setErrors(errors, { emitEvent: true });
    });

    this.reader.onloadend = () => {
      // this.filedata.data = btoa(this.reader.result);
      this.formProperty.setValue(this.filedata, false);
    };
  }

  onFileChange($event) {
    const file = $event.target.files[0];
    this.filedata.data = file
    this.reader.readAsBinaryString(file);
  }
}

And this was the schema I used:

"file": {
            "title": "Add File",
            "type": "object",
            "widget": "custom-file",
            "properties": {
                "data": {
                    "type": "string"
                }
            }
        }

The data property then will house the File Object.

The issue I’m struggling with is being able to show the file if it already exists (a pdf for example or profile image). In this framework what would be the best way to go about doing that? Can you conditionally show buttons? Can you pass in values such as names to the description or file paths (urls)?