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
About Me!
@pankajparkar
(@ngx-lib/multiselect)
Let's assume requirement
(too specific and simpler requirement)
@pankajparkar
user-profile.component.html
user-profile.component.ts
Same requirement came for User Address page
User Address
- Current Address
- Permanent Address
Create separate component for radio-group
Radio-group component uses
Radio-group component uses
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
Extract Code to Library
@pankajparkar
@ngx-lib/multiselect
@pankajparkar
Take Away
@pankajparkar
- Create your own custom form controls
- Maintain it in separate common component library
- Reuse it across organisation
References
@pankajparkar