首次使用Angular Formly与PrimeNG：表单对齐问题求助

方法1：利用PrimeNG原生Grid布局（推荐） #

PrimeNG自带响应式Grid系统，通过p-grid、p-col类可快速实现标签与输入区域的统一对齐：

修改HTML模板 #

给表单和按钮区域添加Grid布局类，确保整体排版规整：

<div class="header">
  <img src="https://raw.githubusercontent.com/ngx-formly/ngx-formly/v5/logo.svg?sanitize=true" alt="" width="72" height="72">
  <h4 class="mat-h2">Angular Formly PrimeNg</h4>
</div>
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="p-grid p-fluid">
  <formly-form
    [form]="form"
    [model]="model"
    [fields]="fields"
    class="p-col-12">
  </formly-form>

  <div class="p-col-12 p-text-right">
    <button pButton type="submit" label="Submit" class="p-mr-2"></button>
    <button pButton type="reset" label="Reset" class="ui-button-danger"></button>
  </div>
</form>

精细化字段布局（自定义Wrapper） #

如果需要更精准的标签-输入框分栏，可创建自定义Formly Wrapper：

1. 新增form-field-wrapper组件模板：

<div class="p-grid p-align-items-center">
  <label class="p-col-4" *ngIf="to.label">{{ to.label }}<span *ngIf="to.required" class="p-error">*</span></label>
  <div class="p-col-8">
    <ng-template formlyField></ng-template>
    <div *ngIf="showError" class="p-error">
      <formly-validation-message [field]="field"></formly-validation-message>
    </div>
  </div>
</div>

2. 在字段配置中引用该Wrapper：

fields: FormlyFieldConfig[] = [
  {
    key: 'input',
    type: 'input',
    wrappers: ['form-field-wrapper'],
    templateOptions: {
      label: 'Input',
      placeholder: 'Input placeholder',
      required: true,
    },
  },
  // 其余字段同理配置
];

方法2：自定义全局CSS样式 #

通过CSS直接统一表单元素的布局规则，适合快速调整：
在全局样式文件（如styles.css）中添加：

/* 统一字段容器布局 */
.formly-field {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
}

/* 固定标签宽度，确保左对齐 */
.formly-field label {
  width: 140px;
  margin-right: 1rem;
  text-align: right;
  font-weight: 500;
}

/* 输入区域占满剩余空间 */
.formly-field .p-inputtext,
.formly-field .p-textarea,
.formly-field .p-dropdown {
  flex: 1;
}

/* 单选/复选框组调整 */
.formly-field .p-radiobutton-group,
.formly-field .p-checkbox {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* 按钮区域右对齐 */
form > div:last-child {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

方法3：确保样式依赖完整 #

缺失PrimeNG或Formly主题样式会导致排版混乱，检查angular.json的styles数组是否包含以下依赖：

"styles": [
  "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeicons/primeicons.css",
  "node_modules/@ngx-formly/primeng/style.css",
  "src/styles.css"
]

以上方法可单独或组合使用，优先推荐方法1，能更好地匹配PrimeNG的原生设计风格。

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