1

我已经开始使用 ionic 从头开始​​构建应用程序，并且喜欢包含http://schemaform.io框架。

我在网页中运行该示例没有任何问题，但我没有使用 ionic。

我已经创建了这个项目

ionic start form blank --v2 --ts

我已经链接了 index.html 中的 js 文件

  <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>

然后我编辑了 home.html 文件，如下所示：

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

和相应的 home.ts 文件如下：

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 = {}; });
  }

我想用这个达到什么目的？我想将示例表单放在离子应用程序中。我喜欢模式表单背后的想法，因为它对我来说很容易理解，但我无法在应用程序框架中绑定表单。非常欢迎每一个帮助...

4

2 回答 2

0

我不认为你想要实现的目标真的是可能的，因为 angular-schema-form 在今天仍然只适用于 angularjs，而 ionic 2+ 正在使用 angular。

这是解决转向 Angular 2+ 进度的问题

但与此同时，您可以使用https://github.com/makinacorpus/angular2-schema-form来实现您想要实现的目标。它的工作原理与 angular-schema 一样，是为 angular 2+ 制作的。

于 2017-09-18T14:49:49.723 回答
0

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

于 2019-01-09T11:11:25.827 回答