TypeScript novo-elements.FormUtils類代碼示例

 constructor(private formUtils: FormUtils) {
   // Dynamic
   this.dynamic = formUtils.toFieldSets(
     MockMeta,
     '$ USD',
     {},
     { token: 'TOKEN', military: true },
     {
       customfield: {
         template: 'custom-demo-component',
       },
     },
   );
   formUtils.setInitialValuesFieldsets(this.dynamic, { firstName: 'Initial F Name', number: 12 });
   this.dynamicForm = formUtils.toFormGroupFromFieldset(this.dynamic);
 }

 constructor(private formUtils: FormUtils) {
   // Check box controls
   this.checkControl = new CheckboxControl({ key: 'check', tooltip: 'Checkbox', label: 'Checkbox', checkboxLabel: 'Checkbox' });
   this.checkListControl = new CheckListControl({
     key: 'checklist',
     label: 'Check List',
     options: ['One', 'Two', 'Three'],
     tooltip: 'CheckList',
     tooltipPosition: 'Top',
   });
   this.tilesControl = new TilesControl({
     key: 'tiles',
     label: 'Tiles',
     options: [{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }, { value: 'disabled', label: 'Disabled', disabled: true }],
     tooltip: 'Tiles',
   });
   this.disabledTilesControl = new TilesControl({
     key: 'disabledTiles',
     label: 'Disabled Tiles',
     readOnly: true,
     options: [{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }],
     tooltip: 'Tiles',
   });
   this.checkForm = formUtils.toFormGroup([this.checkControl, this.checkListControl, this.tilesControl, this.disabledTilesControl]);
 }

 constructor(private formUtils: FormUtils) {
   // File input controls
   this.fileControl = new FileControl({ key: 'file', name: 'myfile', label: 'File', tooltip: 'Files Control' });
   this.multiFileControl = new FileControl({
     key: 'files',
     name: 'myfiles',
     label: 'Multiple Files',
     tooltip: 'Multiple Files',
     multiple: true,
     layoutOptions: { order: 'displayFilesBelow', download: true, edit: true, customActions: true, labelStyle: 'no-box' },
     value: [{ name: 'yourFile.pdf', loaded: true, link: 'www.google.com', description: 'file description' }],
   });
   this.fileForm = formUtils.toFormGroup([this.fileControl, this.multiFileControl]);
 }

 constructor(private formUtils: FormUtils) {
   // Calendar input controls
   this.dateControl = new DateControl({
     key: 'date',
     label: 'Date',
     tooltip: 'Date',
     startDate: new Date().setMonth(new Date().getMonth() - 1),
   });
   this.userDefinedDateControl = new DateControl({
     key: 'userDefinedFormat',
     label: 'User Defined Format',
     tooltip: 'Date',
     dateFormat: 'MMM Do YYYY (dd)',
     textMaskEnabled: false,
   });
   this.timeControl = new TimeControl({ key: 'time', label: 'Time', tooltip: 'Time' });
   this.dateTimeControl = new DateTimeControl({ key: 'dateTime', tooltip: 'Date Time', label: 'Date Time', military: true });
   this.calendarForm = formUtils.toFormGroup([this.dateControl, this.userDefinedDateControl, this.timeControl, this.dateTimeControl]);
 }

 constructor(private formUtils: FormUtils) {
   // Dynamic
   this.dynamicVertical = formUtils.toControls(MockMeta, '$ USD', {}, { token: 'TOKEN', military: true });
   formUtils.setInitialValues(this.dynamicVertical, { number: 0, firstName: 'Bobby Flay' });
   this.dynamicVerticalForm = formUtils.toFormGroup(this.dynamicVertical);
 }

 constructor(private formUtils: FormUtils) {
   // Quick note config;
   this.quickNoteConfig = {
     triggers: {
       tags: '@',
       references: '#',
       boos: '^',
     },
     options: {
       tags: ['First', 'Second'],
       references: ['Third', 'Fourth'],
       boos: ['Test'],
     },
     renderer: {
       tags: (symbol, item) => {
         return `<a class="tag">${symbol}${item.label}</a>`;
       },
       references: (symbol, item) => {
         return `<a class="tag">${symbol}${item.label}</a>`;
       },
       boos: (symbol, item) => {
         return `<strong>${symbol}${item.label}</strong>`;
       },
     },
   };
   // Text-based Controls
   this.textControl = new TextBoxControl({
     key: 'text',
     label: 'Text Box',
     tooltip: 'Textbox',
     readOnly: true,
     value: 'HI',
     required: true,
   });
   this.textAreaControl = new TextAreaControl({
     key: 'textarea',
     label: 'Text Area',
     tooltip: 'Text Area',
     value:
       'Bro ipsum dolor sit amet yard sale saddle pipe, poaching cork 360 punter ACL back country cornice Whistler.  Avie Ski taco mitt, manny first tracks yard sale caballerial heli fatty.  Epic dope grab, brain bucket japan air wack bowl  mute heli corn Snowboard Whistler giblets table top.  Crunchy Snowboard washboard line grab reverse camber.  Bump epic granny gear heli sketching wheelie huckfest face plant crank pow pow chain ring  dirtbag washboard.  Flow endo ski bum sucker hole, death cookies manny schwag pipe.  Dope heli stomp yard sale, saddle shreddin booter gear jammer grom bonk OTB brain bucket bonk japan air Whistler.Clipless pow pow pow, core shot corn butter bomb hole glades face plant dust on crust.  Poaching park face shots bump, Bike cornice death cookies.  Avie cruiser sucker hole face plant switch.  ACL snake bite bonk, twin tip euro rig nose press McTwist.  Ripping skinny trucks shreddin.  Apres pow line euro sharkbite gapers lid.Snake bite derailleur wheels bomb hole.  Huck apres steeps BB first tracks bowl  daffy park euro park rat euro.  North shore death cookies snake bite carve, freshies dirtbag huck reverse camber hellflip frozen chicken heads apres taco glove gnar face shots bro.  Ride flow twister cornice afterbang saddle first tracks rig berm bro face shots.  Ride stoked wack park twin tip trucks chillax shuttle Whistler gondy laps.  Grind berm schwag, table top face shots steed liftie afterbang taco glove frozen chicken heads free ride clean huck.  Rock-ectomy white room nose press avie.Frozen chicken heads gondy bail travel huckfest big ring phat clean.  Taco couloir piste derailleur wack scream backside steeps groomer glades pipe gondy switch skid lid.  Brain bucket betty bowl, moguls gondy Whistler air hardtail.  Flow euro granny gear, McTwist cruiser bonk grom chain suck.  Trucks line huck, stomp ripper washboard euro corduroy death cookies yard sale dope face plant shreddin chain suck.ACL T-bar hellflip, first tracks gondy hardtail rip wack dust on crust schwag frontside couloir laps presta backside.  Road rash Ski ski bum gnar wack flow carve lid.  Nose white room ollie rail table top grom back country washboard dust on crust chillax gear jammer bro stomp stoked.  Lid wheels nose press frontside, park ACL dirtbag huck epic bowl  taco glove OTB.  Fatty mute whip stunt, Whistler McTwist stoked Bike.  Endo brain bucket crank dust on crust back country line ollie gapers afterbang bump stoked taco road rash granny gear.  Deck dirtbag 360 gnar snake bite couloir Bike corduroy frontside crank lid bro.Air tele schwag ollie, hardtail betty crunchy epic  face shots.  Travel flowy misty huck Bike 180 schwag drop hellflip ripping bunny slope carbon roadie tele bail.  Cornice sharkbite 360 frozen chicken heads dope hellflip clipless.  Switch sketching grind brain bucket stunt taco daffy OTB ride liftie brain bucket air huckfest park 360.',
   });
   this.emailControl = new TextBoxControl({ type: 'email', key: 'email', label: 'Email', tooltip: 'Email' });
   this.numberControl = new TextBoxControl({ type: 'number', key: 'number', tooltip: 'Number', label: 'Number' });
   this.currencyControl = new TextBoxControl({
     type: 'currency',
     key: 'currency',
     tooltip: 'Currency',
     label: 'Currency',
     currencyFormat: '$ USD',
   });
   this.floatControl = new TextBoxControl({ type: 'float', key: 'float', tooltip: 'Float', label: 'Float' });
   this.percentageControl = new TextBoxControl({
     type: 'percentage',
     key: 'percentage',
     tooltip: 'Percent',
     label: 'Percent',
     required: true,
   });
   this.quickNoteControl = new QuickNoteControl({
     key: 'note',
     label: 'Note',
     config: this.quickNoteConfig,
     required: true,
     tooltip: 'Quicknote',
   });
   this.aceEditorControl = new AceEditorControl({ key: 'ace', label: 'CODE', tooltip: 'CODE', value: 'var i = 0;' });
   this.textForm = formUtils.toFormGroup([
     this.textControl,
     this.emailControl,
     this.textAreaControl,
     this.numberControl,
     this.currencyControl,
     this.floatControl,
     this.percentageControl,
     this.quickNoteControl,
     this.aceEditorControl,
   ]);
 }

  constructor(private formUtils: FormUtils) {
    let fruits = ['Apples', 'Oranges', 'Bananas', 'Grapes'];
    let cities = [
      {
        id: 1,
        name: 'Boston',
      },
      {
        id: 2,
        name: 'New York',
      },
      {
        id: 3,
        name: 'Washington D.C.',
      },
      {
        id: 4,
        name: 'Orlando',
      },
      {
        id: 5,
        name: 'Houston',
      },
      {
        id: 6,
        name: 'Chicago',
      },
    ];
    let states = [
      {
        value: 'ME',
        label: 'Maine',
      },
      {
        value: 'MD',
        label: 'Maryland',
      },
      {
        value: 'MA',
        label: 'Massachusetts',
      },
      {
        value: 'MI',
        label: 'Michigan',
      },
      {
        value: 'MN',
        label: 'Minnesota',
      },
      {
        value: 'MS',
        label: 'Mississippi',
      },
      {
        value: 'MO',
        label: 'Missouri',
      },
      {
        value: 'MT',
        label: 'Montana',
      },
    ];

    // Picker controls
    this.singlePickerControl = new PickerControl({
      key: 'singlePicker',
      tooltip: 'Single',
      label: 'Single',
      config: { options: ['One', 'Two', 'Three'] },
    });
    this.multiPickerControl = new PickerControl({
      key: 'multiPicker',
      tooltip: 'Multiple',
      label: 'Multiple',
      multiple: true,
      config: { options: ['One', 'Two', 'Three'], type: 'candidate' },
    });
    this.multiPickerControlWithMaxlength = new PickerControl({
      key: 'multiPickerWithMaxlength',
      tooltip: 'Multiple With Maxlength',
      label: 'Multiple With Maxlength',
      multiple: true,
      maxlength: 2,
      config: {
        options: fruits,
        type: 'candidate',
      },
    });
    this.multiPickerControlWithMaxlengthAndPreselects = new PickerControl({
      key: 'multiPickerControlWithMaxlengthAndPreselects',
      tooltip: 'Multiple With Maxlength and Preselects',
      label: 'Multiple With Maxlength & Preselects',
      multiple: true,
      maxlength: 2,
      config: {
        options: fruits,
        type: 'candidate',
      },
    });
    this.entityMultiPickerControl = new PickerControl({
//.........這裏部分代碼省略.........

  ngOnInit() {
    this.textControl = new TextBoxControl({ key: 'text', label: 'Text Box' });
    this.emailControl = new TextBoxControl({ type: 'email', key: 'email', label: 'Email' });
    this.numberControl = new TextBoxControl({ type: 'number', key: 'number', label: 'Number' });
    this.pickerControl = new PickerControl({
      key: 'picker',
      multiple: true,
      label: 'Picker',
      required: true,
      config: {
        resultsTemplate: PickerResults,
        options: ['Apple', 'Banana', 'Grapes', 'Orange', 'Pear'],
      },
    });

    this.textForm = this.formUtils.toFormGroup([this.textControl, this.emailControl, this.numberControl, this.pickerControl]);
  }