@planeasyinc/fe-angular

Angular 17+ standalone components for form engine. Built with partial-Ivy compilation for optimal bundle size and performance.

TL;DR - Quick Reference

``bash


Install

npm install @planeasyinc/fe-angular @planeasyinc/fe-core

Use in component

import { FeFieldHost } from '@planeasyinc/fe-angular';
import { createEngine } from '@planeasyinc/fe-core';

Build library

pnpm run build

Publish

pnpm publish --registry=https://npm.pkg.github.com
`

---

What is @planeasyinc/fe-angular?

@planeasyinc/fe-angular is an Angular library that provides 32+ form control components for building dynamic forms. It works with @planeasyinc/fe-core to manage form state, validation, and value changes.

Key features:
- ✅ 32+ form controls (text, number, select, date, file upload, etc.)
- ✅ Standalone Angular 17+ components
- ✅ Dynamic form rendering via FeFieldHost
- ✅ Type-safe with TypeScript
- ✅ Built with NG-ZORRO Ant Design components

---

Requirements

- Angular: 17.0.0 or higher
- TypeScript: 5.4.x (5.2+ minimum)
- RxJS: 7.8.0 or higher
- Node.js: 18+ (for building)
- NG-ZORRO Ant Design: 17.x (peer dependency)
- @angular/animations: 17.x (peer dependency)
- date-fns: ^2.0.0 (peer dependency)

---

Installation

$3

1. Create .npmrc in your project root:

`ini
@planeasyinc:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
`

2. Install packages:

`bash
npm install @planeasyinc/fe-angular @planeasyinc/fe-core ng-zorro-antd@17 @angular/animations@17 date-fns


or


pnpm add @planeasyinc/fe-angular @planeasyinc/fe-core ng-zorro-antd@17 @angular/animations@17 date-fns
`

Note: You need a GitHub Personal Access Token with read:packages scope.

$3

After installing, you must configure NG-ZORRO in your Angular app. See the NG-ZORRO Setup Guide for detailed instructions.

Quick setup:
1. Import BrowserAnimationsModule in your app module
2. Provide NZ_I18N with locale (e.g., en_US)
3. Add NG-ZORRO styles to your global stylesheet
4. (Optional) Register icons from @planeasyinc/fe-angular/icons

$3

If using pnpm workspaces:

`json
{
"dependencies": {
"@planeasyinc/fe-angular": "workspace:*",
"@planeasyinc/fe-core": "workspace:*"
}
}
`

---

Quick Start

$3

`typescript
import { Component } from '@angular/core';
import { FeTextControl, FeNumberControl } from '@planeasyinc/fe-angular';
import { createEngine } from '@planeasyinc/fe-core';

@Component({
selector: 'app-form',
standalone: true,
imports: [FeTextControl, FeNumberControl],
template:



})
export class FormComponent {
engine = createEngine({
fields: [
{ type: 'text', name: 'name', label: 'Name' },
{ type: 'number', name: 'age', label: 'Age' }
]
});
}
`

$3

`typescript
import { Component } from '@angular/core';
import { FeFieldHost } from '@planeasyinc/fe-angular';
import { createEngine, type FeControlConfig } from '@planeasyinc/fe-core';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-dynamic-form',
standalone: true,
imports: [FeFieldHost, CommonModule],
template:
*ngFor="let field of fields"
[engine]="engine"
[control]="field"
/>

})
export class DynamicFormComponent {
engine = createEngine({
fields: [
{ type: 'text', name: 'email', label: 'Email' },
{ type: 'select', name: 'country', label: 'Country', meta: { options: [...] } }
]
});

fields: FeControlConfig[] = this.engine.config.fields;
}
`

$3

`typescript
// Get all values
const values = this.engine.values.getAll();

// Get single value
const email = this.engine.values.get('email');

// Listen to changes
this.engine.on('valueChanges', (values) => {
console.log('Form values changed:', values);
});

// Submit
const isValid = this.engine.validate();
if (isValid) {
const formData = this.engine.values.getAll();
// Submit formData
}
`

---

Registry Overview

The library uses a registry pattern to map control types to Angular components:

`typescript
import { getRenderer, hasRenderer, ANGULAR_RENDERERS } from '@planeasyinc/fe-angular';

// Check if a control type is supported
if (hasRenderer('text')) {
const Component = getRenderer('text');
// Component is FeTextControl
}

// Access full registry
console.log(ANGULAR_RENDERERS); // Record>
`

FeFieldHost uses this registry to dynamically render controls based on control.type.

---

Available Controls

See docs/controls.md for the complete catalog of 32+ controls.

Categories:
- Text inputs (text, email, phone, password, textarea)
- Numbers (number, number-slider, number-operations)
- Selection (select, multiselect, radio, checkbox, toggle)
- Date/Time (date, datetime, time, date-triplet)
- Structural (array, dict, group, object)
- File uploads (attachment, file)
- Special (button, chat, infoscreen, mask, json)

---

Versioning & Releases

We follow Semantic Versioning:

- Major (x.0.0): Breaking changes
- Minor (0.x.0): New features, backward compatible
- Patch (0.0.x): Bug fixes, backward compatible

Current version: 0.1.2

Release tags:
- Published to GitHub Packages: @planeasyinc/fe-angular@0.1.2
- Git tags: v0.1.2`

Breaking changes:
- Angular 17+ required (no support for Angular 16 or lower)
- TypeScript 5.4.x recommended (5.2+ minimum)

---

Documentation

- NG-ZORRO Setup Guide - Required: Setting up NG-ZORRO in your app
- Guide - Architecture, adding controls, theming, publishing
- Controls Catalog - Complete list of all controls
- Migration Guide - Migrating from console components
- Troubleshooting - Common errors and fixes

---

Support

- Issues: GitHub Issues (if public) or internal ticketing
- Questions: Contact the team lead

---

License

Proprietary - Internal use only