如何为Angular Material Formly字段设置只读？添加readonly属性未生效

我尝试在component.ts的Formly字段props中添加readonly: true，但渲染后的表单没有生效。我查了props相关文档，没找到和只读字段相关的内容。相关代码如下：

app.component.ts #

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

@Component({
  selector: 'app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit(model)">
      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  `,
})
export class AppComponent {
  form = new FormGroup({});
  model = { email: 'email@gmail.com' };
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      props: {
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
      }
    }
  ];

  onSubmit(model) {
    console.log(model);
  }
}

app.component.html #

<form [formGroup]="form" (ngSubmit)="onSubmit(model)">
  <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

解决方案 #

针对Angular Material Formly的input字段设置只读，有两种可靠的实现方式：

方法1：直接在props中添加readonly属性 #

官方@ngx-formly/material适配器支持将readonly属性从props传递给底层的MatInput组件，直接在字段配置中添加即可：

fields: FormlyFieldConfig[] = [
  {
    key: 'email',
    type: 'input',
    props: {
      label: 'Email address',
      placeholder: 'Enter email',
      required: true,
      readonly: true, // 新增此行开启只读
    }
  }
];

方法2：通过attributes传递原生HTML只读属性 #

如果方法1不生效（比如使用非官方适配器或旧版本），可以直接给字段绑定原生HTML的readonly属性：

fields: FormlyFieldConfig[] = [
  {
    key: 'email',
    type: 'input',
    props: {
      label: 'Email address',
      placeholder: 'Enter email',
      required: true,
    },
    attributes: {
      readonly: 'readonly', // 传递原生只读属性
    }
  }
];

注意：readonly与disabled的区别 #

• readonly：字段内容可选中、复制，但无法编辑，表单提交时会正常携带该字段的值
• disabled：字段不可选中、编辑，表单提交时不会携带该字段的值（若需要保留值，可结合form.get('email').disable({ emitEvent: false, onlySelf: true })使用）

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