{"id":19303056,"url":"https://github.com/asc-lab/ngx-formly-playground","last_synced_at":"2025-10-18T04:59:37.736Z","repository":{"id":39549677,"uuid":"183159387","full_name":"asc-lab/ngx-formly-playground","owner":"asc-lab","description":"Project with list of Angular Formly exercises. Every next exercise add new feature to the previous one.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:56:27.000Z","size":1889,"stargazers_count":17,"open_issues_count":28,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-01T22:46:52.211Z","etag":null,"topics":["angular","angular-formly","angular7","ngx-formly","playground"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asc-lab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-24T06:07:24.000Z","updated_at":"2023-12-18T17:30:51.000Z","dependencies_parsed_at":"2023-02-06T12:30:25.560Z","dependency_job_id":null,"html_url":"https://github.com/asc-lab/ngx-formly-playground","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asc-lab%2Fngx-formly-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asc-lab%2Fngx-formly-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asc-lab%2Fngx-formly-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asc-lab%2Fngx-formly-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asc-lab","download_url":"https://codeload.github.com/asc-lab/ngx-formly-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250232150,"owners_count":21396580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-formly","angular7","ngx-formly","playground"],"created_at":"2024-11-09T23:24:52.956Z","updated_at":"2025-10-18T04:59:32.696Z","avatar_url":"https://github.com/asc-lab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Formly Playground\n\nFormly Playground is a project with list of [Angular Formly](https://github.com/ngx-formly/ngx-formly)  exercises.\nEvery next exercise add new feature to the previous one.\n\n## Business background\n\nThe purpose of the project is to build applications form using [Angular Formly](https://github.com/ngx-formly/ngx-formly), which could support requests to Concierge.\n\nWhy [Angular Formly](https://github.com/ngx-formly/ngx-formly)? From the fist moment it's clear that the form will contain many options and questions. On the main Formly page you can read \"The `formly-form` Component and the `FormlyConfig` service are very powerful and bring unmatched maintainability to your applications forms\", so why not check if it's true.\n\n## Before exercise one\nApplication setup \n\n### Task list\n- generate application with [Angular CLI](https://github.com/angular/angular-cli) \n- install [Ngx Formly](https://formly.dev/guide/getting-started)\n- use one of UI library in our project, in this project Material2 was used\n- to app.module.ts import the FormlyModule and UI (pre-defined types/templates)\n- check if app works - run `ng serve` dev server and navigate to `http://localhost:4200/`\n\n### In this project\n- `home component` was created as navigation page to each exercise\n- `angular-material.imports.ts` module was added to collect all [Angular Material](https://material.angular.io/) imports in one shared module\n- to import all exercises components with a single statement `index.ts` file was created\n- in `app.component.html` file, fixed app-header was added\n\n## Exercise One\nRequest to Concierge should be divided into sections:\n- Order Identification\n- Shoppings\n- Additional Comments\n- Statements\n\nComponent [Card](https://material.angular.io/components/card/overview) should be used as section layout.\nAdd Order Identification card.\n\n### Task list\n- generate component `exercise-one`\n- read documentation [custom-formly-wrapper](https://formly.dev/guide/custom-formly-wrapper)\n- in `shared\\custom-wrappers` folder create component `card-wrapper`\n- in `app.module.ts` register new custom wrapper as a wrapper\n- in component `exercise-one` create \"Order Identification\" Card using `card-wrapper`\n- check if app works\n\n### In this project\n- in file `app-routing.module.ts` route to component was added\n- to import all custom wrappers with a single statement `index.ts` file was created\n\nBelow you can find screen of component after adding some custom style. \n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"Exercise-one-screen\" src=\"https://raw.githubusercontent.com/asc-lab/ngx-formly-playground/master/readme-images/ex-one%200.png\"/\u003e\n\u003c/p\u003e\n\n## Exercise Two\nAdd other sections and add questions to each section. In section Shopping user should be able to add and remove shopping items.\n\n### Task list\n- generate component `exercise-two`\n- copy code from component `exercise-one`\n- add: Shoppings, Additional Comments, Statements sections - use `card-wrapper` created in exercise one\n- read documentation [ui material guide](https://formly.dev/ui/material)\n- in `shared\\model` folder add ts files with model\n- in `shared\\services` folder add `request.service.ts` with `saveRequest` method to simulate connection to api\n- in `shared\\services` folder add `dict.service.ts` with `getDictionaryItems` method to simulate connection to api\n- add some fields to each section in component `exercies-two` (use different types of fields)\n- read documentation [repeating-section](https://formly.dev/examples/advanced/repeating-section)\n- in `shared\\custom-types` folder create component `repeat-section`\n- in `app.module.ts` register new `repeat-section` as a type\n- in component `exercies-two` in section Shoppings use `repeat-section`\n- check if app works\n\n### In this project\n- in file `app-routing.module.ts` route to component was added\n- to import all custom types with a single statement `index.ts` file was created\n\nBelow you can find screen of component after adding some questions and custom style\n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"Exercise-two-screen\" src=\"https://raw.githubusercontent.com/asc-lab/ngx-formly-playground/master/readme-images/ex-two_2%200.png\"/\u003e\n\u003c/p\u003e\n\n## Exercise Three\nAdd validation to fields, use global and custom validations\n\n### Task list\n- generate component `exercise-three`\n- copy code from component `exercise-two`\n- read documentation [built-in validations](https://formly.dev/examples/validation/built-in-validations)\n- add global validations to `app.module.ts` \n- in component ts file add some custom validations\n\nIn this project\n- in file `app-routing.module.ts` route to component was added\n- in exercise seven approach to global validation was changed - go to exercise seven to see it\n- in field `cardId` [async validator](https://formly.dev/examples/validation/unique-value-async-validation) was used\n- in field `email` [validation message](https://formly.dev/examples/validation/validation-message) to attribute pattern was added\n\n## Exercise Four\nAdd new section Services (use `repeat-section`). Section Services should be visible when order type = SERVICES. Section Shoppings should be visible when order type = SHOPPINGS.\nChange `order type` field in custom type filed. Replace \"boring\" select by \"fanyc\" radio buttons images.\n\n### Task list\n- generate component `exercise-four`\n- copy code from component `exercise-three`\n- in `shared\\model` folder add ts files with model\n- add: Services sections - use `card-wrapper` created in exercise one\n- in section Services use `repeat-section` created in exercise two\n- in `shared\\custom-types` folder create component `img-radio-type`\n- in `app.module.ts` register new `img-radio-type` as a type\n- in component `exercies-four` replace type in filed `orderType` by a new created type\n- check if app works\n\n### In this project\n- in file `app-routing.module.ts` route to component was added\n- in section Shoppings and Services [Flex - Layout](https://formly.dev/examples/other/advanced-layout-flex) was used\n\nBelow you can find screen of component after adding new section, custom radio btn and custom styles\n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"Exercise-one-screen\" src=\"https://raw.githubusercontent.com/asc-lab/ngx-formly-playground/master/readme-images/ex-four.gif\"/\u003e\n\u003c/p\u003e\n\n## Exercise Five\nRequest form is to long to one screen, change form layout to stepper.\n\n### Task list\n- generate component `exercise-five`\n- copy code from component `exercise-four`\n- read documentation [multi-step-form](https://formly.dev/examples/advanced/multi-step-form)\n- remember to import `MatStepperModule` from `@angular/material/stepper`\n- in component `exercies-five` add multi-step-form (you have to make changes in html and ts files)\n- check if app works\n\n### In this project\n- in file `app-routing.module.ts` route to component was added\n\nBelow you can find screen of component with stepper and custom styles\n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"Exercise-five-screen\" src=\"https://raw.githubusercontent.com/asc-lab/ngx-formly-playground/master/readme-images/ex-five.gif\"/\u003e\n\u003c/p\u003e\n\n## Exercise Six\nAdd translation module to project, and use it in request form.\n\n### Task list\n- install [ngx-translate](https://github.com/ngx-translate/core)\n- read documentation [i18n](https://formly.dev/examples/advanced/i18n)\n- in `scr\\assets\\translations` folder add json files with translations (in this project there are to files en.json and pl.json)\n- in `shared\\services\\i18n` folder add `translation-loader.service.ts` with `loadTranslations` method to load translations files\n- in `shared\\services\\i18n` folder add `language.service.ts` with `getCurrentLanguage` method to set up selected language\n- in this project `translationLoader` is initialized in `home component`\n- in component `exercise-six` inject `TranslateService` and now it is possible to use translation service, use `instant` method to load translations e.g. `label: this.translate.instant('RequestToConcierge.orderIdentification')`\n- add new method `getDictionaryItemsWithTranslations` in `dict.service.ts` (service was added in ex two)\n- in component `exercise-six` in field `orderTypes` load dictionary items with translations\n- check if app works\n\n### In this project\n- in file `app-routing.module.ts` route to component was added\n- `validations.loader` was added in exercise seven\n\nBelow you can find screen of component with translations in action\n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"Exercise-six-screen\" src=\"https://raw.githubusercontent.com/asc-lab/ngx-formly-playground/master/readme-images/ex-six.gif\"/\u003e\n\u003c/p\u003e\n\n## Exercise Seven\nAdd translation to global validation. Component ts file is to long and e.g code to Price range fields repeats itself, refactor code.\n\n### Task list \n- to load global validation you need to use [FormlyConfig service by calling addValidatorMessage](https://github.com/ngx-formly/ngx-formly/issues/313)\n- in `shared\\services` folder add `validations.loader.ts` with `init` method\n- in this project `validationsLoader` is initialized in `home component`\n- in model `PriceRange.ts` add `formField` method, type of `FormlyFieldConfig[]` it should return fields config (the same as in component ts) e.g\n\n```javascript\n formField(translations: TranslateService): FormlyFieldConfig[] {\n        return [\n            {\n                className: 'flex-2',\n                key: 'from',\n                type: 'input',\n                templateOptions: {\n                    type: 'number',\n                    label: translations.instant('RequestToConcierge.priceRangeForm'),\n                    min: 1,\n                    max: 999999,\n                    required: true\n                },\n            },\n            {\n                className: 'flex-2',\n                key: 'to',\n                type: 'input',\n                templateOptions: {\n                    type: 'number',\n                    label: translations.instant('RequestToConcierge.priceRangeTo'),\n                    min: 1,\n                    max: 999999,\n                    required: true,\n                },\n            }\n        ];\n    }\n```\n\n### In this project\n- similar `formField` methods were created in `Service.ts` and `Shopping.ts`\n- new methods can be now use in other components eg. \n\n```javascript\n  fieldArray: {\n    fieldGroup: this.shoppingModel.formField(this.translate)\n    },\n```\n\n- check if app works\n\n## Libraries\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.8.\n- [Angular Material](https://material.angular.io/)\n- [Angular Formly](https://github.com/ngx-formly/ngx-formly) \u0026 [Angular Material Formly Module](https://formly.dev/ui/material)\n- [Angular Flex-Layout](https://github.com/angular/flex-layout)\n- [ngx-translate](https://github.com/ngx-translate/core)\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasc-lab%2Fngx-formly-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasc-lab%2Fngx-formly-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasc-lab%2Fngx-formly-playground/lists"}