Home Angular Utility Library For Breaking Angular Form Into Multiple Components

Utility Library For Breaking Angular Form Into Multiple Components

Angular webcodeflow · February 23, 2022 · Comments off

ngx subform utility library to improve the robustness of angular forms. Whether you have simple and small forms or huge and complex forms, the ngx subform will help you build a solid foundation for it.

🗜️ Tiny bundle: It’s about 30KB since we support both the old API and the new interface but soon it will be 15KB!
✅ Simple API: No angular module to setup, no manual ControlValueAccessor, no inheritance, no modularity. Just one job to create all your forms!
🤖Adds a type of security to your forms
✂️ Lets you split huge shapes into smaller shapes for simplicity and reuse

Schema-based Form Generator Component On Vue.js

How to make use of it:

Installation

npm i ngx-sub-form

In this scenario, the smart component might look like this:

@Component({
  selector: 'person-container',
  template: `
    <person-form [person]="person$ | async" (personUpdate)="personUpdate($event)"></person-form>
  `,
})
export class PersonContainer {
  public person$: Observable<Person> = this.personService.person$;

  constructor(private personService: PersonService) {}

  public personUpdate(person: Person): void {
    this.personService.update(person);
  }
}

Break Down A Form Into Multiple Components, ngx subform Plugin/Github