@ajsf/ 物质

角材料框架 协会,它从JSON Schema中构建了角形.

开始

@ajsf/material 声明 @angular/material 财务报告和审定财务报表 @angular/cdk 作为同伴的依赖和需要 一个材料主题. ng add @angular/material 安装两者并写入主题 :

ng add @angular/material
npm install @ajsf/material

导入 MaterialDesignFrameworkModule 以独立组件构成形式。 没有进去 app.config.ts,不需要动画提供者:

import { Component } from '@angular/core';
import { MaterialDesignFrameworkModule } from '@ajsf/material';

@Component({
  selector: 'app-root',
  imports: [MaterialDesignFrameworkModule],
  templateUrl: './app.html',
})
export class App {
  schema = {
    type: 'object',
    properties: {
      name: { type: 'string', title: 'Name' },
      plan: { type: 'string', title: 'Plan', enum: ['free', 'pro', 'team'] },
    },
    required: ['name'],
  };

  onSubmit(data: any) {
    console.log(data);
  }
}

在一个 NgModule 应用程序,添加 MaterialDesignFrameworkModule 到模块的 imports 换句话说.

然后在组件的模板中使窗体:

<json-schema-form
  [schema]="schema"
  framework="material-design"
  (onSubmit)="onSubmit($event)">
</json-schema-form>

framework="material-design" 选择此软件包的部件。 其他价值是: primeng, (中文(简体) ), bootstrap-3, (中文(简体) ), bootstrap-4, (中文(简体) ), bootstrap-5 财务报告和审定财务报表 no-framework,默认值.

这个软件包将新应用的初始捆绑到1.40 MB, 高于 1 MB maximumError 预算 ng new 写入 angular.json,所以提高 initial 预算 production 配置,例如用于 "maximumWarning": "2MB" 财务报告和审定财务报表 "maximumError": "2.5MB"。 。 。 .

这个 AJSF 读取 涵盖其他输入和输出、布局、自定义部件和验证消息.