Skip to content

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

@Robinyo

Description

@Robinyo

Sample form:

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions