Support for Angular v20 and Angular Material (M3) v20.2.1

[Robinyo]

Sample form:

Sample form definition:

[

  {
    "type": "input",
    "id": "name.givenName",
    "label": "Given Name",
    "appearance": "outline",
    "autocomplete": "given-name",

    "validators": [
      {
        "name": "required",
        "args": null,
        "propertyName": "required",
        "message": "You must enter a given name"
      }
    ],

    "gridItemClass": "md-grid-column-1",
    "required": true
  },

  {
    "type": "input",
    "id": "name.middleName",
    "label": "Middle Name",
    "appearance": "outline",
    "autocomplete": "additional-name",

    "gridItemClass": "md-grid-column-2",
    "required": false
  },

  {
    "type": "image",
    "id": "photoUrl",
    "label": "Avatar",
    "gridItemClass": "md-grid-column-3-row-1-span-3"
  },

  {
    "type": "input",
    "id": "name.familyName",
    "label": "Family Name",
    "appearance": "outline",
    "autocomplete": "family-name",

    "validators": [
      {
        "name": "required",
        "args": null,
        "propertyName": "required",
        "message": "You must enter a family name"
      }
    ],

    "gridItemClass": "md-grid-column-1-span-2",
    "required": true
  },

  {
    "type": "input",
    "id": "party.displayName",
    "label": "Full Name",
    "appearance": "outline",
    "autocomplete": "name",

    "gridItemClass": "md-grid-column-1-span-2"
  },

  {
    "type": "input",
    "id": "name.title",
    "label": "Title",
    "appearance": "outline",
    "autocomplete": "organization-title",

    "gridItemClass": "md-grid-column-1"
  },

  {
    "type": "input",
    "id": "email",
    "label": "Email",
    "appearance": "outline",
    "autocomplete": "email",

    "validators": [
      {
        "name": "email",
        "args": null,
        "propertyName": "email",
        "message": "Please enter a valid email address"
      }
    ],

    "gridItemClass": "md-grid-column-2",
    "required": false
  },

  {
    "type": "input",
    "id": "organisation.phoneNumber",
    "label": "Business Phone",
    "appearance": "outline",
    "autocomplete": "tel",

    "gridItemClass": "md-grid-column-3"
  },

  {
    "type": "input",
    "id": "organisation.displayName",
    "label": "Account Name",
    "appearance": "outline",
    "autocomplete": "organization",

    "gridItemClass": "md-grid-column-1-span-2",

    "suffixIconName": "search"
  }

]

See: https://github.com/Robinyo/serendipity/tree/serendipity-3.0

[danielhokanson]

He has been inactive for a while. I upgraded to angular 19 and am currently working on angular/material 20

https://github.com/danielhokanson/ng-dynamic-forms

I will also be putting out Angular 21 shortly