DEV Community: pardeepr08

Build your own angular forms - ngModel

pardeepr08 — Tue, 06 Aug 2024 03:43:01 +0000

If you are an angular developer, you must have used angular form package many a times in your projects to manage your forms.

If you are curious to know, what goes behind the scenes to propel such an awesome form management package?

I am trying to explain and decode angular forms through some series of articles like how angular form package is organized, written and well architected to handle so many different type of form controls and related use cases.

Don't worry if you feel overwhelmed seeing above flow diagram, we will go through it one component at a time.

As you already know, ngModel is used to synchronize the values defined in component with any form elements value.

But how ngModel does so?

So, let's think over some of the use cases, ngModel should have implemented.

It should accept input property ngModel which will be synchronized with underlying host element.
It should support all different types of form elements like text input, number input, checkbox, select etc.
It should also work with the custom form elements.

Complexity involved in implementing ngModel directive with above use cases

As different form elements are dealt differently which means when you write to them, you write to different properties and when you want to track changes in form elemets, you might have to register for different types of events relevant to host element where you apply ngModel directive

For example, for input having types as text | number | email we will write to the value property but for checkbox we write to the checked property

Picking the naive approach to design ngModel

@Directive({
  selector: '[ngModel]',
  exportAs: 'ngModel'
})
export class NgModel implements OnChanges {
  @Input('ngModel') model: any
  @Output('ngModelChange') update = new EventEmitter()

  constructor(private _elementRef: ElementRef) {}

  ngOnChanges(changes: SimpleChanges): void {    
    this._elementRef.nativeElement.value = this.model
  }

  @HostListener("input", ["$event.target.value"]) onInput(value: any) {
    this.update.emit(value)
  }
 }

So, as you can see, we inject the elemetRef to get hold of host element and write to it when ngModel input property is passed during change detection and also, we register on host element for the input event and emit updated input value back to the use case component.

Though simple approach but it has some drawbacks:

If we adopt this approach, it won't scale easily for remaining form controls as different form controls involve some complexity when writing and reading their values.
Putting everything in ngModel makes it less configurable and hard to work with custom form elements.

Instead, how angular does it?

Referring to the above diagram, ngModel delegate this responsibility of reading and writing to different types of form elements to different set of directives called control value accessors.

What are control value accessors?

These are just simple directives which gets applied to a particular or group of form elements based on their selectors.

Each control value accessor implements below interface

export interface ControlValueAccessor {
    writeValue(obj: any): void;
    registerOnChange(fn: any): void;
}

How it helps ngModel?

Each CVA directive is aware of, how to write to particular host element and how to read it by registering to events emitted by host element and thus it frees ngModel from managing the complexity.

Also these CVA directives expose themselves as a service on a DI token NG_VALUE_ACCESSOR which ngModel can inject and get hold of correct control value accessor to write and read values from host element

When ngModel directive is applied on a form element then not only ngModel instance is created but alongwith it an instance of control value accessor directive is also created which is relevant to host element.

Angular provides different types of CVA directive

DefaultControlValueAccessor, It is created when applying ngModel on inputs expect the input having type as checkbox.
CheckBoxControlValueAccessor, When applying ngModel on checkbox input, instead of default CVA this is created.
SelectControlValueAccessor, Its created for select box and a few more.

How ngModel integerate with CVA ?

Control value accessor directive expose itself as a service on a dependency injection token NG_VALUE_ACCESSOR

const DEFAULT_VALUE_ACCESSOR: Provider  = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DefaultControlValueAccessor)
}

@Directive({
    selector: "input:not([type=checkbox])[ngModel]",
    providers: [DEFAULT_VALUE_ACCESSOR]
})
export class DefaultControlValueAccessor extends BaseControlValueAccessor implements ControlValueAccessor {    
    writeValue(value: string): void {
        this.setProperty("value", value)
    }

    @HostListener("input", ["$event.target.value"]) onInput(value: string) {
        this.onChange(value)
    }
}

ngModel can inject this DI token and get hold of correct CVA directive created.

constructor(@Inject(NG_VALUE_ACCESSOR) valueAccessor: ControlValueAccessor) {
    this.valueAccessor = valueAccessor;
  }

ngModel register itself using registerOnChange method of the injected control value accessor directive instance so that it gets all updates made by user on the host element and thus emit the updated data back to component using ngModelChange event emitter.

How ngModel works with custom form elements?

@Component({
  selector: 'choose-quantity',
  templateUrl: "choose-quantity.component.html",
  styleUrls: ["choose-quantity.component.scss"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi:true,
      useExisting: ChooseQuantityComponent
    }
  ]
})
export class ChooseQuantityComponent implements ControlValueAccessor {

Actually, what ngModel cares about is control value accessor and a component representing a custom form element can simply implement control value accessor interface and configure itself as a service on the DI token NG_VALUE_ACCESSOR

Please share your thought and doubts in the comment section.

If you love exploring the angular form internals and recreate it from scratch with me, you can visit my YouTube channel

Procedural Vs Functional way of solving a JS interview problem

pardeepr08 — Sat, 05 Aug 2023 06:12:28 +0000

Are you also stuck clearing the UI interviews 😕, don’t worry i have a problem for you to practise and learn 😎

💡Problem

Write a method called readKey that can access nested properties of an object using a given path.

Some use case for better understanding the problem

const obj = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3
    }
  }
}
console.log(readKey(obj, 'a')); // Output: 1
console.log(readKey(obj, 'b.c')); // Output: 2
console.log(readKey(obj, 'b.d.e')); // Output: 3
console.log(readKey(obj, 'x.y.z')); // Output: undefined (Property not found)

Here’s how i thought of implementing the same using two approaches:

Procedural code 😕

function readKey(obj, path) {
  const keys = path.split('.');
  let result = obj;
  for (const key of keys) {
    if (typeof result === 'object' && result !== null) {
      result = result[key];
    } else {
      return undefined; // Property not found
    }
  }
  return result;
}

Functional code 😎

function readKey(obj, path) {
  return path
    .split('.')
    .reduce((acc, key) => {
      if (acc !== null && typeof acc === 'object') {
        return acc[key]
      }
    }, obj)
}

✋ Ignoring some edge cases in code for the sake of simplicity only.

Now, comparing both the approaches pros and cons 🤷‍♂️

To me functional approach is clean, short, abstract and more descriptive. Also shorter the code, less is the surface area for bugs 😁

On the other side, one can argue that procedural code is more optimized as we cannot break from reduce method when we are sure of not finding the key path in object 🤔 but still i trade that off with code readability 😎

What is your opinion on this 🤔 ? Please comment.

If you found this post relevant and worth read, follow me for more …

Embrace the beauty of map, filter and reduce

pardeepr08 — Tue, 01 Aug 2023 07:39:25 +0000

It’s rare that you are not asked any questions related to these in your UI interviews. In this post, I am going to discuss the various aspects and importance of these methods and how they can create a shift in your coding style.

Since we work with arrays most often to collect related data together, many scenarios require operating on arrays, which includes transforming the array, applying filters, or deriving some data out of it.

These methods rescue us from doing so in many ways in a cleaner and concise way with no side effects involved.

Before we truly embrace the beauty of these methods, let’s first do these operations in a conventional way we were used to before these landed.

*Scenario *: Given an array having the radius of circles, derive two arrays: one having the circle area and the other having the circumference.

Formulas used:
PI value = 3.14
Area of a circle = PI * radius * radius
Circumference = 2 * PI * radius

Old school method using for loop:

// calculating circle area
const radius = [1, 2, 3, 4, 5];
const area = [];
for (let i = 0; i < radius.length; i++) {
  area.push(Math.PI * Math.pow(radius[i], 2));
}

// calculating circle circumference
const circumference = [];
for (let i = 0; i < radius.length; i++) {
  circumference.push(2 * Math.PI * radius[i]);
}

Using map:

const radius = [1, 2, 3, 4, 5];
const area = radius.map(r => Math.PI * r * r);
const circumference = radius.map(r => 2 * Math.PI * r);

As you can observe, when using the for-loop approach, there is only one change in calculating area and circumference — that is the formula itself, and the iteration part is common and repeating.

That’s the essence of using map as it abstracts away the iteration part for you, and all you need to focus on is the transformation logic. So your many lines of code are squeezed into just two lines. Isn't it like a magic wand?

Summarizing the benefits of using map over its counterpart for-loop:

Highly readable and concise as it aligns well with functional programming.
Doesn’t mutate the original array but returns a new array with transformed values.
Inbuilt iteration capability; all I need to care about is passing my transformer function.
Supports chaining with other array methods like filter, reduce, etc.

Filter and reduce provide similar advantages as map, but these two cater to different use cases as below:

Filter: It iterates over the array elements and returns only those elements which pass the filter logic.

// Filter only even numbers from the given array
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(n => n % 2 === 0);

Reduce: It can be used to derive some data from an array based on the logic passed.

// Calculate the sum of array elements
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num);

Also created some related interview questions as youtube shorts on my channel. Please check if these helps you understand more.

https://youtube.com/shorts/-nb7UCukk1A?feature=share
https://youtube.com/shorts/EvBhdYyFlyc?feature=share