Angular Formly Read Only

How can I make my Angular Material formly fields read-only? I've looked at their documentation for props and seen nothing relating to read-only fields.

I Added "readonly: true" as a prop to my Formly fields in my component.ts file and could not see the changes reflected in rendered form.

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>

Continue reading...