zoukankan      html  css  js  c++  java
  • [ngx-formly] Implement multi-column layout Forms with Angular Formly

    Real forms are rarely visualized as a single column with one field below the other. Rather they often span over multiple columns to save screen space. In this lesson we'll have a look how to implement such a multi-column form with Formly.

    Note, future versions of Formly might even include some native constructs for more advanced layouts

    function Row(fields: FormlyFieldConfig[]) {
      return {
        fieldGroup: fields,
        fieldGroupClassName: 'display-flex flex-wrap row',
      };
    }
    
    function Column(fields: FormlyFieldConfig[]) {
      return {
        fieldGroup: fields,
        fieldGroupClassName: 'display-flex column',
      };
    }
    .display-flex {
      display: flex;
    }
    
    .row {
      flex-direction: row;
    }
    
    .column {
      flex-direction: column;
    }
    
    .flex-wrap {
      flex-wrap: wrap;
    }
    
    @for $i from 1 through 12 {
      .flex-#{$i} {
        flex: $i;
      }
    }
    
    [class*='flex-'] {
      padding-left: 10px;
      padding-right: 10px;
    }
    
    [class*='flex-']:first-child,
    .flex-12 {
      padding-left: 0;
    }
    
    [class*='flex-']:last-child {
      padding-right: 0;
    }
        Row([
          {
            key: 'firstname',
            type: 'input',
            className: 'flex-1',
            templateOptions: {
              type: 'text',
              label: 'FirstName',
              required: true,
              attributes: {
                'data-cy': 'firstname',
              },
            },
          },
          {
            key: 'age',
            type: 'input',
            className: 'flex-1',
            templateOptions: {
              type: 'number',
              label: 'Age',
              min: 18, // use global min error message
            },
            // override the global min error message
            validation: {
              messages: {
                min: 'Sorry, you have to be older than 18',
              },
            },
          },
        ]),
        Column([
          {
            key: 'ip',
            type: 'input',
            templateOptions: {
              required: true,
              label: 'IP Address',
            },
            validators: {
              // validation: ['ip']
              ip2: {
                expression: c => !c.value || /(d{1,3}.){3}d{1,3}/.test(c.value),
                message: (errorr, field: FormlyFieldConfig) =>
                  `"${field.formControl.value}" is not valid`,
              },
            },
          },
        ]),

  • 相关阅读:
    BZOJ 1191 HNOI2006 超级英雄hero
    BZOJ 2442 Usaco2011 Open 修建草坪
    BZOJ 1812 IOI 2005 riv
    OJ 1159 holiday
    BZOJ 1491 NOI 2007 社交网络
    NOIP2014 D1 T3
    BZOJ 2423 HAOI 2010 最长公共子序列
    LCA模板
    NOIP 2015 D1T2信息传递
    数据结构
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12177982.html
Copyright © 2011-2022 走看看