ohayolibs/src/app/routes/form-pages/validator/validator.component.html

Ohayo is a set of essential modules for ohayojp.

<div nz-row class="border-bottom-1 pb-sm mb-md">
  <div nz-col [nzSpan]="18">
    <nz-select [(ngModel)]="name" (ngModelChange)="getSchema()">
      <nz-option *ngFor="let i of files" [nzValue]="i.name" [nzLabel]="i.title"></nz-option>
    </nz-select>
    <nz-radio-group [(ngModel)]="layout" class="ml-sm">
      <label nz-radio-button nzValue="horizontal">水平</label>
      <label nz-radio-button nzValue="vertical">垂直</label>
      <label nz-radio-button nzValue="inline">行内</label>
    </nz-radio-group>
  </div>
  <div nz-col [nzSpan]="6" class="text-right">
    <nz-button-group>
      <button nz-tooltip [nzTooltipTitle]="expand ? 'Hide Code' : 'Show Code'" nz-button (click)="expand = !expand">
        <i nz-icon nzType="vertical-{{ expand ? 'right' : 'left' }}"></i>
      </button>
      <button nz-tooltip [nzTooltipTitle]="'app.demo.stackblitz' | translate" nz-button (click)="openOnStackBlitz()" class="ml-sm">
        <i nz-icon nzType="form"></i>
      </button>
      <button nz-tooltip [nzTooltipTitle]="'app.demo.copy' | translate" nz-button (click)="onCopy()" class="ml-sm">
        <i nz-icon nzType="copy"></i>
      </button>
    </nz-button-group>
  </div>
</div>
<div nz-row class="border-bottom-1 pb-sm mb-md" nzGutter="24">
  <div nz-col [nzSpan]="12" [hidden]="!expand">
    <nz-tabset>
      <nz-tab nzTitle="Schema" (nzClick)="refreshLayout('schemaEditor')">
        <nu-monaco-editor #schemaEditor [(ngModel)]="schema" (ngModelChange)="run()" [options]="editorOptions" height="500px"></nu-monaco-editor>
      </nz-tab>
      <nz-tab nzTitle="Form Data" (nzClick)="refreshLayout('formCodeEditor')">
        <nu-monaco-editor #formCodeEditor [(ngModel)]="formCode" (ngModelChange)="run()" [options]="editorOptions" height="500px"></nu-monaco-editor>
      </nz-tab>
      <nz-tab nzTitle="UI Schema" (nzClick)="refreshLayout('uiEditor')">
        <nu-monaco-editor #uiEditor [(ngModel)]="uiCode" (ngModelChange)="run()" [options]="editorOptions" height="500px"></nu-monaco-editor>
      </nz-tab>
    </nz-tabset>
  </div>
  <div nz-col [nzSpan]="expand ? 12 : 24" *ngIf="schemaData">
    <sf
      [schema]="schemaData"
      [formData]="formData"
      [ui]="uiSchema"
      [layout]="layout"
      (formSubmit)="submit($event)"
      (formChange)="change($event)"
      (formValueChange)="valueChange($event)"
      (formError)="error($event)"
    ></sf>
  </div>
</div>