如何在带有打字稿的Ionic 2.0中包含angular-schema-form

Question

I've started to build an app with ionic from scratch and liked to include the http://schemaform.io framework.

I have no problems with running the example in a webpage but I failed to do so with ionic.

I have created the project with

ionic start form blank --v2 --ts

I have linked the js files in the index.html

  <script type="text/javascript" src="build/js/libs/schema-form/angular.min.js"></script>
  <script type="text/javascript" src="build/js/libs/schema-form/angular-sanitize.min.js"></script>
  <script type="text/javascript" src="build/js/libs/schema-form/tv4.js"></script>
  <script type="text/javascript" src="build/js/libs/schema-form/ObjectPath.js"></script>
  <script type="text/javascript" src="build/js/libs/schema-form/schema-form.min.js"></script>
  <script type="text/javascript" src="build/js/libs/schema-form/bootstrap-decorator.min.js"></script> 

Then I have editet the home.html file like this:

<ion-content padding>
  <div ng-controller="FormController">
    <form sf-schema="schema" sf-form="form" sf-model="model"></form>
  </div>
</ion-content>

and the according home.ts file like this:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormPage } from 'schemaForm';


@Component({ templateUrl: 'build/pages/form/form.html', })
export class FormPage { constructor(private navCtrl: NavController) {

angular.module('myModule', ['schemaForm']).controller('FormController',  
  function($scope) {
  $scope.schema = {
  type: "object",
     properties: {
     name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
     title: {
         type: "string",
         enum: ['dr','jr','sir','mrs','mr','NaN','dj']
     }
 } 
};
$scope.form = [ "*", {
   type: "submit",
   title: "Save" } ];
$scope.model = {}; });
  }

What I wanted to reach with this? I'd liked to put the example form in an ionic app. I like the idea behind schema form because it is easy to understand for me but I fail to bind the form in an app framework. Every help is very welcome ...

Answer 1

I don't think that what you are trying to achieve is really possible since angular-schema-form is still as per this day only for angularjs while ionic 2+ is using angular.

Here is the issue to tack the progress of moving to angular 2+

But in the meantime you can use https://github.com/makinacorpus/angular2-schema-form for what you are trying to achieve. Its works just as angular-schema and was made for angular 2+.

Answer 2

Here is the plugin for JSON Schema form in IONIC that uses angular2 JSON schema in the backend. Here is the npm link: https://www.npmjs.com/package/ionic-json-schema-form