如何在Angular+Angular Formly+Material中并排布置输入框（无需外部CSS）

嘿，这个场景我刚好经常碰到！不用写额外CSS的话，其实Angular Formly结合Angular Material有两种很方便的实现方式，都是利用框架自带的能力：

方法1：用Angular Material Grid List布局 #

Material的Grid系统天生就是用来做响应式布局的，把每个输入框放到mat-grid-tile里，指定占比就能轻松并排，完全不用自定义样式。

模板代码 #

<form [formGroup]="form">
  <!-- 总列数设为12，两个输入框各占6列 -->
  <mat-grid-list cols="12" gutterSize="16px">
    <mat-grid-tile colspan="6">
      <formly-field [field]="fields[0]"></formly-field>
    </mat-grid-tile>
    <mat-grid-tile colspan="6">
      <formly-field [field]="fields[1]"></formly-field>
    </mat-grid-tile>
  </mat-grid-list>
</form>

组件类配置 #

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  form = new FormGroup({});
  model: any = {};
  fields: FormlyFieldConfig[] = [
    {
      key: 'firstName',
      type: 'input',
      props: {
        label: 'First Name',
        required: true,
      },
    },
    {
      key: 'lastName',
      type: 'input',
      props: {
        label: 'Last Name',
        required: true,
      },
    },
  ];
}

注意：要确保你的模块里已经导入了MatGridListModule和MatGridTileModule哦。

方法2：用Formly Field Group + Material Flex布局类 #

这种方式更紧凑，直接给Formly的字段组和字段添加Material自带的flex类，让容器变成弹性布局，自动分配空间。

组件类配置 #

fields: FormlyFieldConfig[] = [
  {
    // 给字段组添加flex布局类
    className: 'd-flex',
    fieldGroup: [
      {
        key: 'firstName',
        type: 'input',
        props: {
          label: 'First Name',
          required: true,
        },
        // 让输入框占满可用空间，加右边距分隔
        className: 'flex-fill mr-2',
      },
      {
        key: 'lastName',
        type: 'input',
        props: {
          label: 'Last Name',
          required: true,
        },
        className: 'flex-fill',
      },
    ],
  },
];

模板代码 #

<form [formGroup]="form">
  <formly-form [fields]="fields" [model]="model"></formly-form>
</form>

这里的d-flex、flex-fill、mr-2都是Angular Material自带的工具类，不用你写一行自定义CSS，而且响应式表现也很好。

两种方法都能满足你的需求，看你更喜欢哪种布局方式啦！

内容的提问来源于stack exchange，提问作者chandu