forms - Angular Formly Read Only - Stack Overflow

admin管理员组

文章数量:1332896

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.

appponent.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 protected]' };
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      props: {
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
      }
    }
  ];

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

appponent.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>

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.

appponent.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 protected]' };
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      props: {
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
      }
    }
  ];

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

appponent.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
• forms
• angular-material
• angular-formly

Share Improve this question Follow asked Nov 21, 2024 at 5:29 KafrizzKafrizz 2122 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

In the latest versions of formly, you can use formState property of options to pass in the readOnly property.

options: FormlyFormOptions = {
  formState: { readonly: true },
};

Then use this property in the form definitions property expressions and update the readonly property.

  expressions: {
    'props.readonly': 'formState.readonly',
  },

I am using signals to achieve the reactive toggling of readOnly but you can use traditional angular methods. The effect reacts to the signal changes and updates the options.

Full Code:

import { Component, computed, effect, Signal, signal } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'formly-app-example',
  templateUrl: './appponent.html',
  standalone: false,
})
export class AppComponent {
  readOnly = signal(false);
  form = new FormGroup({});
  model = { email: '[email protected]' };
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      expressions: {
        'props.readonly': 'formState.readonly',
      },
      templateOptions: {
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
      },
    },
  ];
  computedOptions = {
    formState: { readonly: this.readOnly() },
  };

  constructor() {
    effect(() => {
      thisputedOptions.formState.readonly = this.readOnly();
    });
  }

  toggle() {
    this.readOnly.update((value) => !value);
  }

  onSubmit() {
    alert(JSON.stringify(this.model, null, 4));
  }
}

HTML:

<button type="button" class="btn btn-primary" (click)="toggle()">
  {{ readOnly() ? 'edit' : 'readOnly' }}
</button>

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

Stackblitz Demo

You can use disabled property of anuglar to make the field read-only. refer the code below for reference:

appponent.ts:

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

@Component({
  selector: 'app',
})

export class AppComponent {
  form = new FormGroup({});
  model = { email: '[email protected]' };

  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      props: {
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
        disabled: true, // set disabled property to true field to be read-only
      },
    },
  ];

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

appponent.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>

本文标签： formsAngular Formly Read OnlyStack Overflow