Making of Web application

  • Library / Framework / Vanilla
  • If need statement management
  • CSS Framework
  • Various controls

@pankajparkar

Forms

  • Pristine
  • dirty
  • valid / invalid
  • touched / untouched

@pankajparkar

Pankaj P. Parkar

Technical Lead, Synerzip

  • MS MVP

  • Angular GDE

  • OSS Maintainer​

  • Stackoverflow Topuser

GitHub @pankajparkar Twitter Follow

About Me!

@pankajparkar

(@ngx-lib/multiselect)

Let's assume requirement

(too specific and simpler requirement)

@pankajparkar

user-profile.component.html

user-profile.component.ts

Stackblitz Demo

Same requirement came for User Address page

User Address 

  • Current Address
  • Permanent Address

Stackblitz Demo

Source: https://memegenerator.net/instance/63914690/bad-luck-brian-of-course-my-code-is-reusable-ctrl-c-ctrl-v

Create separate component for radio-group

Radio-group component uses

Radio-group component uses

Stackblitz Demo

Futher Challanges

@pankajparkar

  • Can't use template driven form
  • Applying validation dynamically can be challenging
  • Could lead to unmaintainable code

ControlValueAccessor

Accesor Form Element
DefaultValueAccessor input, textarea
CheckboxControlValueAccessor input[type=checkbox]
NumberValueAccessor input[type=number]
RadioControlValueAccessor input[type=radio] 
RangeValueAccessor input[type=range]
SelectControlValueAccessor select
SelectMultipleControlValueAccessor select[multiple] 

Above all classes inherits from ControlValueAccessor

CVA API

  • writeValue
  • registerOnChange

  • registerOnTouched

  • setDisabled

@pankajparkar

Extend Provider

const DEFAULT_CONTROLVALUEACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  multi: true,
  useExisting: forwardRef(() => RadioGroupComponent)
}
@Component({
  selector: 'cb-radio-group',
  templateUrl: './radio-group.component.html',
  styleUrls: ['./radio-group.component.css'],
  providers: [DEFAULT_CONTROLVALUEACCESSOR]
})
export class RadioGroupComponent {
  ...
}

Let's Code

@pankajparkar

https://github.com/pankajparkar/radio-group

Extract Code to Library

@pankajparkar

  1. Create Library
  2. Building and Packaging
  3. Publishing
  4. Peer dependencies manage

@ngx-lib/multiselect

@pankajparkar

Demo

Take Away

@pankajparkar

  • Create your own custom form controls
  • Maintain it in separate common component library
  • Reuse it across organisation

References

@pankajparkar

Create your own custom form control

By Pankaj Parkar

Made with Slides.com

Create your own custom form control

  • 788

More from Pankaj Parkar