Control angular forms in just functions 🔥

#angular #html #typescript

Forms are an important concept to be covered and controlled in the client-side development... in the previous article, I talked about forms in angular and how to manage them easily with Rxjs.

Hack Angular Forms With Rxjs 🔥

Moussa ・ Jul 17 '20 ・ 5 min read

#angular #typescript #html

Idea:

keep it simple is a concept, we will use only angular two-way data binding connected with only functions and component props in a functional way. no more template-driven, reactive forms or even observable forms :D

Note: this pattern can be useful in small static forms.

we will be going with pseudocode for HTML and component coverage and the full code with demo will be included. let's start!

Component Goal:

let's assume that we have a user form component as pice of our app and we planned to reuse it so it will be declarative enough and prevent its noise from parent components will render. here are some props and functions our component will need.

Component Ui:

the form is simple to keep the view part only focusing on UI stuff and CSS styling, with just inputs and a piece of banana in the box [()], with buttons eventually binding into the component class.

<div>
  <input [(ngModel)]="name" type="text">
  <input [(ngModel)]="active" type="checkbox">
  <button (click)="onSubmit()">Save</button>
  <button (click)="onReset()">Reset</button>
</div>

that's all that we need from our component view. no more logic noise clear or directives.

Functional part in component:

the place where the component view will dance, we need two main things only. variables or props which will act as form controls, and functions that are will handle form actions like submit and reset.

export class UserFormComponent {
  // controls 
  name = ''
  active = false

  onSubmit() {
    // collecting component data before submit. 
    const {name, age} = this
    const userData = {name, age}

    console.log(userData)
  }

  onReset() { 
    // component is clear again.
    this.name = '';
    this.active = false
  }
}

and that's it we have a simple clean component that will act as a solid piece from our greater app!

Bonus:

since we are building a solid re-usable component so we have to consider its communication channel with the other components. Yah. it needs to pass its data into the world and we can deal with that inside angular by event emitting via @Output(). actually, we almost need the form data when submitting the event but in some cases, we need to emit also reset events to the parent component for any reset stuff related to other components. let's implement both.

export class UserFormComponent {
  @Output() submit = new EventEmitter<object>()
  @Output() reset = new EventEmitter<any>()

  onSubmit() {
    // collecting component data before submit. 
    const {name, age} = this
    const userData = {name, age}

    console.log(userData)
    this.submit.emit(userData)
  }

  onReset() {
    this.reset.emit()
  }
}

another pro tip to validate our form before submit and again form logic will be inside it, not another place so let's validate before traveling to the parent component. in just function no more built-in or third-party validators.

export class UserFormComponent {
  onSubmit() {
    // validating component data before submit.
    if(!this.isValid()) { return }

    // ... submit code
  }

  private isValid(): boolean {
    // just required name and active. you can go with your validation logic and add another else if blocks.
    const {name, active} = this
    if(name && active) {
      return true
    } else {
      return false
    }
  }
}

Concolusion 🖐️

we discussed forms management tips for angular development by using built-in frameworks Data binding and event emitters. in a functional way, BUT this approach not Exclusive at angular think about it functional programming is heavily welcomed in javascript frameworks and the second part is a data binding is a behavior that another framework can offer like VueJs in v-model directive. and React in useState() hook. so this pattern may be useful at any js framework not only angular.

thought sharing is welcomed since all of that post is just a personal point of view through daily experience.

Github Repo
Live Demo
Find Me on Twitter