Angular forms ಸ್ಟ್ಯಾಂಡರ್ಡ್ HTML ನೊಂದಿಗೆ ಅದ್ಭುತವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ. input, textarea, ಮತ್ತು select ಎಲ್ಲವೂ ಯಾವುದೇ ಹೆಚ್ಚಿನ ಪ್ರಯತ್ನವಿಲ್ಲದೆ Reactive Forms ನೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ. ಈ ಫ್ರೇಮ್ವರ್ಕ್ ಅವುಗಳ events, values ಮತ್ತು states ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತದೆ.
ಆದರೆ ಆಧುನಿಕ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಕೇವಲ ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಎಲಿಮೆಂಟ್ಗಳ ಮೂಲಕವೇ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ. ನಿಮಗೆ ಸ್ಟಾರ್ ರೇಟಿಂಗ್ ವಿಜೆಟ್ (star rating widget), ಕಾಂಪೋಸಿಟ್ ಡೇಟ್ ಸೆಲೆಕ್ಟರ್ (composite date selector), ಅಥವಾ ಕಸ್ಟಮ್ ಕಲರ್ ಪಿಕರ್ (custom color picker) ಅಗತ್ಯವಿರಬಹುದು. ಇವುಗಳಲ್ಲಿ ಒಂದನ್ನು form group ನ ಒಳಗೆ ಹಾಕಿದರೆ, Angular ಅದನ್ನು ಕೇವಲ ಒಂದು 'dead HTML' ಎಂದು ಪರಿಗಣಿಸುತ್ತದೆ. patchValue ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ. Validators ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತವೆ. ಬಳಕೆದಾರನು ಕಂಟ್ರೋಲ್ನೊಂದಿಗೆ ಯಾವಾಗ ಸಂವಹನ ನಡೆಸುತ್ತಾನೆ ಎಂಬುದು ಫಾರ್ಮ್ಗೆ ತಿಳಿಯುವುದಿಲ್ಲ ಮತ್ತು form.disable() ಮಾಡಿದರೂ ಸಹ ಆ ಕಸ್ಟಮ್ ವಿಜೆಟ್ ಪೂರ್ಣವಾಗಿ ಇಂಟರಾಕ್ಟಿವ್ ಆಗಿಯೇ ಇರುತ್ತದೆ.
ControlValueAccessor ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ.
ControlValueAccessor ನಿಜವಾಗಿಯೂ ಏನು ಮಾಡುತ್ತದೆ
ControlValueAccessor ಎಂಬುದು ಒಂದು ಕರಾರು (contract) ಆಗಿದ್ದು, ಇದು ಕಸ್ಟಮ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಫಾರ್ಮ್ನ ಒಂದು ಪ್ರಮುಖ ಭಾಗವನ್ನಾಗಿ (first-class form citizen) ಪರಿವರ್ತಿಸುತ್ತದೆ. ಇದು Angular Forms API ಮತ್ತು ನಿಮ್ಮ ಸ್ವಂತ UI ನಡುವೆ ಒಂದು ಅನುವಾದಕನಂತೆ (translator) ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ನೀವು ಇದನ್ನು ಸರಿಯಾಗಿ ಅಳವಡಿಸಿದರೆ (implement), ಫಾರ್ಮ್ನ ದೃಷ್ಟಿಕೋನದಿಂದ ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಒಂದು native input ನಂತೆಯೇ ಕಾಣಿಸುತ್ತದೆ. ಇದು ಬಿಲ್ಟ್-ಇನ್ ಎಲಿಮೆಂಟ್ನಂತೆಯೇ values ಅನ್ನು ಸ್ವೀಕರಿಸಬಹುದು, changes ಅನ್ನು ಎಮಿಟ್ (emit) ಮಾಡಬಹುದು, touches ಅನ್ನು ವರದಿ ಮಾಡಬಹುದು ಮತ್ತು disabled states ಅನ್ನು ಗೌರವಿಸಬಹುದು.
ಈ ಇಂಟರ್ಫೇಸ್ ನಾಲ್ಕು ನಿರ್ದಿಷ್ಟ ಮೆಥಡ್ಗಳನ್ನು (methods) ಬಯಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದೂ ಸಂವಹನದ ವಿಭಿನ್ನ ದಿಕ್ಕನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.
writeValue: Form ನಿಂದ Component ಗೆ
writeValue(obj) ಎಂಬುದು ಇನ್ಬೌಂಡ್ ಲೇನ್ (inbound lane). ಫಾರ್ಮ್ ಮಾಡೆಲ್ ಅಪ್ಡೇಟ್ ಆದಾಗ ಮತ್ತು ನಿಮ್ಮ UI ಗೆ ಹೊಸ value ಅನ್ನು ಕಳುಹಿಸಬೇಕಾದಾಗ, Angular ಈ ಮೆಥಡ್ ಅನ್ನು ಕರೆಯುತ್ತದೆ. ನೀವು ಒಂದು form group ಮೇಲೆ patchValue({ rating: 4 }) ಅನ್ನು ಇನ್ವೋಕ್ ಮಾಡಿದರೆ, ಆ 4 ಎಂಬ value writeValue ಮೂಲಕ ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ನ ಒಳಗೆ ಬರುತ್ತದೆ. ನೀವು ಫಾರ್ಮ್ ಅನ್ನು ರಿಸೆಟ್ ಮಾಡಿದರೆ, writeValue ಹೊಸ ಆರಂಭಿಕ value ಅಥವಾ null ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. ಈ ಮೆಥಡ್ನ ಒಳಗೆ ನಿಮ್ಮ ಕೆಲಸವೆಂದರೆ ಆ ಇನ್ಕಮಿಂಗ್ ಡೇಟಾವನ್ನು ಪಡೆದು ಅದನ್ನು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ನ ಇಂಟರ್ನಲ್ ಸ್ಟೇಟ್ಗೆ (internal state) ಮ್ಯಾಪ್ ಮಾಡುವುದು. ನೀವು ಕಲರ್ ಪಿಕರ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, writeValue #ff4400 ನಂತಹ hex ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಆ ಕಲರ್ ಅನ್ನು ಸೆಲೆಕ್ಟ್ ಮಾಡಲಾಗಿದೆ ಎಂದು ತೋರಿಸಲು ನೀವು ನಿಮ್ಮ ವ್ಯೂ ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಬೇಕು.
ಇಲ್ಲಿ ಒಂದು ಪ್ರಾಯೋಗಿಕ ಸವಾಲಿದೆ. ವಿಶೇಷವಾಗಿ ಡೈನಾಮಿಕ್ ಆಗಿ ರೆಂಡರ್ ಆಗುವ ಕಾಂಪೊನೆಂಟ್ಗಳು, ಡೈಲಾಗ್ಗಳು ಅಥವಾ ಟ್ಯಾಬ್ಡ್ ಇಂಟರ್ಫೇಸ್ಗಳ ಒಳಗೆ, ನಿಮ್ಮ ವ್ಯೂ ಸಂಪೂರ್ಣವಾಗಿ ಇನಿಶಿಯಲೈಸ್ (initialize) ಆಗುವ ಮೊದಲೇ Angular writeValue ಅನ್ನು ಕರೆಯಬಹುದು. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ತುಂಬಾ ಬೇಗನೆ DOM ಅಥವಾ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ಗಳನ್ನು ಸ್ಪರ್ಶಿಸಲು (touch) ಪ್ರಯತ್ನಿಸಿದರೆ, ನೀವು runtime errors ಎದುರಿಸಬಹುದು. ಒಂದು ಉತ್ತಮ ವಿಧಾನವೆಂದರೆ value ಅನ್ನು ಲೋಕಲ್ ಪ್ರಾಪರ್ಟಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಿಟ್ಟುಕೊಳ್ಳುವುದು ಮತ್ತು ವ್ಯೂ ಇನಿಶಿಯಲೈಸ್ ಆದ ನಂತರ ಅದನ್ನು ಅನ್ವಯಿಸುವುದು, ಅಥವಾ undefined ಚೈಲ್ಡ್ ರೆಫರೆನ್ಸ್ಗಳ ವಿರುದ್ಧ ರಕ್ಷಣೆ (guard) ಮಾಡುವುದು. ನಿಮ್ಮ ಟೆಂಪ್ಲೇಟ್ ಸ್ಥಿರವಾದಾಗ ಮಾತ್ರ writeValue ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಎಂದಿಗೂ ಭಾವಿಸಬೇಡಿ.
registerOnChange: Component ನಿಂದ Form ಗೆ
registerOnChange(fn) ಎಂಬುದು ಔಟ್ಬೌಂಡ್ ಲೇನ್ (outbound lane) ಅನ್ನು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ. Angular ನಿಮಗೆ ಒಂದು callback ಫಂಕ್ಷನ್ ಅನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ನೀವು ಅದರ ರೆಫರೆನ್ಸ್ ಅನ್ನು ಇಟ್ಟುಕೊಳ್ಳಬೇಕು. ಬಳಕೆದಾರನು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ನ ಒಳಗೆ value ಅನ್ನು ಬದಲಾಯಿಸಿದ ಪ್ರತಿ ಬಾರಿಯೂ, ನೀವು ಆ ಫಂಕ್ಷನ್ ಅನ್ನು ಹೊಸ value ನೊಂದಿಗೆ ಕರೆಯಬೇಕು. ಸ್ಟಾರ್ ರೇಟಿಂಗ್ ಕಾಂಪೊನೆಂಟ್ನಲ್ಲಿ, ಬಳಕೆದಾರನು ಮೂರನೇ ಸ್ಟಾರ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ನೀವು ಸಂಗ್ರಹಿಸಿದ callback ಅನ್ನು 3 ನೊಂದಿಗೆ ಇನ್ವೋಕ್ ಮಾಡಬೇಕು. ಆ ಕರೆಯು FormControl ಗೆ ಹಿಂತಿರುಗುತ್ತದೆ, ಮಾಡೆಲ್ ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ, ಯಾವುದೇ valueChanges ಸಬ್ಸ್ಕ್ರಿಪ್ಶನ್ಗಳನ್ನು ಟ್ರಿಗ್ಗರ್ ಮಾಡುತ್ತದೆ ಮತ್ತು validators ಅನ್ನು ಮರು-ಚಾಲನೆ ಮಾಡುತ್ತದೆ.
ಈ ಹಂತವನ್ನು ಬಿಟ್ಟುಬಿಡುವುದು ಫಾರ್ಮ್ ಅನ್ನು ಸುಪ್ತವಾಗಿ (silently) ಹಾಳುಮಾಡುವ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮಾರ್ಗವಾಗಿದೆ. ವಿಜೆಟ್ ಜೀವಂತವಾಗಿರುವಂತೆ ಕಾಣಬಹುದು. ಬಳಕೆದಾರರು ಸ್ಟಾರ್ಗಳು ಬೆಳಗುವುದನ್ನು, ಬಣ್ಣಗಳು ಬದಲಾಗುವುದನ್ನು ಅಥವಾ ಡೇಟ್ಗಳು ತುಂಬುವುದನ್ನು ನೋಡಬಹುದು. ಆದರೆ ಫಾರ್ಮ್ ಮಾಡೆಲ್ ಎಂದಿಗೂ ಅಪ್ಡೇಟ್ ಆಗುವುದಿಲ್ಲ. Validators ಹಳೆಯ ಡೇಟಾವನ್ನೇ (stale data) ಮೌಲ್ಯಮಾಪನ ಮಾಡುತ್ತಿರುತ್ತವೆ. Submit handlers ಹಳೆಯ values ಅನ್ನು ಕಳುಹಿಸುತ್ತವೆ. ಕಾಂಪೊನೆಂಟ್ ಕೆಲಸ ಮಾಡುತ್ತಿರುವಂತೆ ಕಾಣುತ್ತದೆ, ಆದರೆ ಫಾರ್ಮ್ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಕುರುಡಾಗಿರುತ್ತದೆ. ನಿಮ್ಮ ಕಸ್ಟಮ್ ಕಂಟ್ರೋಲ್ ಬಳಕೆದಾರರ ಇನ್ಪುಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಆದರೆ ಸುತ್ತಲಿನ ಫಾರ್ಮ್ ಅದನ್ನು ಗಮನಿಸದಿದ್ದರೆ, ಇದಕ್ಕೆ ಇದೇ ಕಾರಣವಾಗಿರುತ್ತದೆ.
registerOnTouched: ಸಂವಹನವನ್ನು ವರದಿ ಮಾಡುವುದು
ಫಾರ್ಮ್ಗಳು ಕೇವಲ values ಅನ್ನು ಮಾತ್ರ ಟ್ರ್ಯಾಕ್ ಮಾಡುವುದಿಲ್ಲ. ಬಳಕೆದಾರನು ಫೀಲ್ಡ್ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿದ್ದಾನೆಯೇ ಎಂಬುದನ್ನು ಅವು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತವೆ. ವ್ಯಾಲಿಡೇಶನ್ ಎರರ್ಗಳನ್ನು (validation errors) ತೋರಿಸುವುದು ಯಾವಾಗ ಸೂಕ್ತ ಎಂದು ನಿರ್ಧರಿಸಲು Angular 'touched state' ಅನ್ನು ಬಳಸುತ್ತದೆ. ಒಂದು required text input ಪೇಜ್ ಲೋಡ್ ಆದ ತಕ್ಷಣವೇ ಕೆಂಪಾಗಿ ಮಿನುಗಬಾರದು. ಬಳಕೆದಾರನು tab key ಒತ್ತಿ ಹೊರಗೆ ಹೋಗುವವರೆಗೆ ಅಥವಾ ಬೇರೆಡೆ ಕ್ಲಿಕ್ ಮಾಡುವವರೆಗೆ ಅದು ಕಾಯಬೇಕು.
Native inputs ಇವುಗಳನ್ನು blur events ಮೂಲಕ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತವೆ. ಕಸ್ಟಮ್ ಕಾಂಪೊನೆಂಟ್ಗಳು ಹಾಗೆ ಮಾಡುವುದಿಲ್ಲ. ಈ ಸಂವಹನಗಳನ್ನು ವರದಿ ಮಾಡಲು ನೀವು registerOnTouched(fn) ಅನ್ನು ಬಳಸಲೇಬೇಕು. Angular ನಿಮಗೆ ಇನ್ನೊಂದು callback ನೀಡುತ್ತದೆ; ಬಳಕೆದಾರನು ಕಂಟ್ರೋಲ್ನೊಂದಿಗೆ ಅರ್ಥಪೂರ್ಣವಾಗಿ ತೊಡಗಿಸಿಕೊಂಡಿದ್ದಾನೆ ಎಂದು ನೀವು ನಿರ್ಧರಿಸಿದಾಗ ನೀವು ಅದನ್ನು ಕರೆಯಬಹುದು.
ಇದರ ನಿಖರವಾದ ಸಮಯವು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ. ಪಠ್ಯದಂತಹ (text-like) ಕಸ್ಟಮ್ ಇನ್ಪುಟ್ಗೆ, ನೀವು ಇದನ್ನು blur ಸಮಯದಲ್ಲಿ ಕರೆಯಬಹುದು. ಸ್ಟಾರ್ ರೇಟಿಂಗ್ಗೆ, ಮೊದಲ ಕ್ಲಿಕ್ ಸರಿಯಾದ ಸಮಯವಾಗಬಹುದು. ಪಾಪೋವರ್ (popover) ತೆರೆಯುವ ಕಲರ್ ಪಿಕರ್ಗೆ, ನೀವು ಪ್ಯಾಲೆಟ್ ಮುಚ್ಚುವವರೆಗೆ ಕಾಯಬಹುದು. ಇಲ್ಲಿ ಮುಖ್ಯವಾದುದು ಸ್ಥಿರತೆ (consistency). ನೀವು ಎಂದಿಗೂ touched callback ಅನ್ನು ಕರೆಯದಿದ್ದರೆ, Angular ಕಂಟ್ರೋಲ್ ಅನ್ನು 'pristine' ಎಂದು ಗುರುತಿಸುತ್ತಲೇ ಇರುತ್ತದೆ. ಬಳಕೆದಾರನು ಎಡಿಟಿಂಗ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರವೂ ವ್ಯಾಲಿಡೇಶನ್ ಎರರ್ಗಳು ಅಡಗಿದೆಯೇ ಇರುತ್ತವೆ. ಇದು ಗೊಂದಲ ಮತ್ತು ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ (poor user experience) ಕಾರಣವಾಗುತ್ತದೆ.
setDisabledState: ಫಾರ್ಮ್ ಕಮಾಂಡ್ಗಳನ್ನು ಗೌರವಿಸುವುದು
ಡೈನಾಮಿಕ್ ಫಾರ್ಮ್ಗಳು ಬಿಸಿನೆಸ್ ಲಾಜಿಕ್ ಆಧಾರದ ಮೇಲೆ ನಿರಂತರವಾಗಿ ಫೀಲ್ಡ್ಗಳನ್ನು ಎನೇಬಲ್ (enable) ಮತ್ತು ಡಿಸೇಬಲ್ (disable) ಮಾಡುತ್ತವೆ. ನೀವು FormControl ಮೇಲೆ .disable() ಅನ್ನು ಕರೆ ಮಾಡಿದಾಗ, ನಿಮ್ಮ ಕಸ್ಟಮ್ ಕಂಪೊನೆಂಟ್ ಅದಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾಗುತ್ತದೆ. setDisabledState(isDisabled) ಒಂದು ಬೂಲಿಯನ್ (boolean) ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. ಅದು true ಆಗಿದ್ದಾಗ, ನೀವು ನಿಮ್ಮ UI ಅನ್ನು ಲಾಕ್ ಮಾಡಬೇಕು.
ಇದರರ್ಥ ಕೇವಲ ಕ್ಲಿಕ್ಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು ಮಾತ್ರವಲ್ಲ. ನೀವು ಒಳಗಿನ ಬಟನ್ಗಳನ್ನು ಡಿಸೇಬಲ್ ಮಾಡಬೇಕು, ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಸ್ಥಿತಿಗಳನ್ನು (focusable states) ತೆಗೆದುಹಾಕಬೇಕು ಮತ್ತು ಕಡಿಮೆ ಒಪಾಸಿಟಿ (reduced opacity) ಅಥವಾ pointer-events: none ನಂತಹ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು (visual treatments) ಅನ್ವಯಿಸಬೇಕು. ನೀವು ಈ ಮೆಥಡ್ ಅನ್ನು ನಿರ್ಲಕ್ಷಿಸಿದರೆ, ಫಾರ್ಮ್ ಮಾಡೆಲ್ ಅದು ಡಿಸೇಬಲ್ ಆಗಿದೆ ಎಂದು ಹೇಳುತ್ತಿದ್ದರೂ, ನಿಮ್ಮ ಕಂಪೊನೆಂಟ್ ಸಂಪೂರ್ಣವಾಗಿ ಇಂಟರಾಕ್ಟಿವ್ ಆಗಿಯೇ ಇರುತ್ತದೆ. ಇದು ಪತ್ತೆಹಚ್ಚಲು ಕಷ್ಟವಾದ ಬಗ್ಗಳನ್ನು (bugs) ಸೃಷ್ಟಿಸುತ್ತದೆ. ಫಾರ್ಮ್ ತಿರಸ್ಕರಿಸಬೇಕಾದ ಮೌಲ್ಯಗಳನ್ನು ಬಳಕೆದಾರರು ಬದಲಾಯಿಸಬಹುದು. ಅಮಾನ್ಯ ಸ್ಥಿತಿಗಳ (invalid states) ಆಧಾರದ ಮೇಲೆ ಸೇವ್ ಬಟನ್ಗಳು ಎನೇಬಲ್ ಆಗಬಹುದು. ಇದರಿಂದ ಫಾರ್ಮ್ ಗ್ರೂಪ್ ಮತ್ತು UI ನಡುವೆ ವ್ಯತ್ಯಾಸ ಉಂಟಾಗುತ್ತದೆ.
ಉತ್ತಮವಾಗಿ ನಿರ್ಮಿಸಲಾದ ಕಸ್ಟಮ್ ಕಂಟ್ರೋಲ್ setDisabledState ಅನ್ನು ಕೇವಲ ನಂತರದ ಆಲೋಚನೆಯಾಗಿ ನೋಡದೆ, ಒಂದು ಪ್ರಮುಖ ಅವಶ್ಯಕತೆಯಾಗಿ ಪರಿಗಣಿಸುತ್ತದೆ.
ಡಿಬಗ್ ಮಾಡುವ ಸಮಯವನ್ನು ವ್ಯರ್ಥ ಮಾಡುವ ತಪ್ಪುಗಳು
ಈ ಇಂಟರ್ಫೇಸ್ಗೆ ಹೊಸಬರಾದ ડેವಲಪರ್ಗಳು ಮಾಡುವ ಕೆಲವು ಪುನರಾವರ್ತಿತ ತಪ್ಪುಗಳು ಇಲ್ಲಿವೆ.
ಚೇಂಜ್ ಕಾಲ್ಬ್ಯಾಕ್ (change callback) ಅನ್ನು ಕರೆಯಲು ಮರೆಯುವುದು. ನಿಮ್ಮ ಕಂಪೊನೆಂಟ್ ತನ್ನ ಆಂತರಿಕ ಸ್ಥಿತಿಯನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ, ಆದರೆ ಫಾರ್ಮ್ಗೆ ಅದರ ಬಗ್ಗೆ ತಿಳಿಯುವುದಿಲ್ಲ. ಇದರಿಂದ ವ್ಯಾಲಿಡೇಟರ್ಗಳು (Validators) ನಿಂತುಹೋಗುತ್ತವೆ ಮತ್ತು ಪೇರೆಂಟ್ ಫಾರ್ಮ್ಗಳು ಹಳೆಯ ಡೇಟಾವನ್ನು (stale data) ಸಬ್ಮಿಟ್ ಮಾಡುತ್ತವೆ. ಬಳಕೆದಾರರು ಹೊಸ ಮೌಲ್ಯವನ್ನು ನೀಡಿದ ತಕ್ಷಣ ಯಾವಾಗಲೂ ಆ ಸ್ಟೋರ್ ಮಾಡಲಾದ onChange ಫಂಕ್ಷನ್ ಅನ್ನು ರನ್ ಮಾಡಿ.
ಟೌಚ್ಡ್ ಕಾಲ್ಬ್ಯಾಕ್ (touched callback) ಅನ್ನು ಬಿಟ್ಟುಬಿಡುವುದು. ಇಲ್ಲದಿದ್ದರೆ, Angular ಎಂದಿಗೂ ಕಂಟ್ರೋಲ್ ಅನ್ನು 'touched' ಎಂದು ಗುರುತಿಸುವುದಿಲ್ಲ. touched ಅಥವಾ dirty ಸ್ಥಿತಿಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಎರರ್ ಮೆಸೇಜ್ಗಳು ಕಾಣಿಸಿಕೊಳ್ಳುವುದಿಲ್ಲ. ಬಳಕೆದಾರರು ಸರಿಯಾಗಿ ಕಾಣಿಸುವ ಆದರೆ ಸಬ್ಮಿಟ್ ಆಗದ ಫಾರ್ಮ್ ಅನ್ನು ನೋಡುತ್ತಾ, ಏನು ತಪ್ಪಾಗಿದೆ ಎಂಬುದು ತಿಳಿಯದೆ ಕಂಗಾಲಾಗುತ್ತಾರೆ.
ಡಿಸೇಬಲ್ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು. ದೃಶ್ಯವಾಗಿ ಎನೇಬಲ್ ಆಗಿರುವ ಕಂಟ್ರೋಲ್ ಅನ್ನು ಫಾರ್ಮ್ ಡಿಸೇಬಲ್ ಎಂದು ಭಾವಿಸಿದರೆ, ಅದು ನಂಬಿಕೆಯ ಅಂತರವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಟೈಪ್ ಮಾಡಬಹುದು ಅಥವಾ ಕ್ಲಿಕ್ ಮಾಡಬಹುದು, ಆದರೆ ಮಾಡೆಲ್ ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ. ಅಥವಾ ಇನ್ನೂ ಕೆಟ್ಟದಾಗಿ ಹೇಳಬೇಕೆಂದರೆ, ಸಿಂಕ್ ಸೈಕಲ್ಗಳ ಸಮಯದಲ್ಲಿ ಮಾಡೆಲ್ ಅವರ ಇನ್ಪುಟ್ ಅನ್ನು ಅನಿರೀಕ್ಷಿತವಾಗಿ ಓವರ್ರೈಟ್ ಮಾಡಬಹುದು.
NG_VALUE_ACCESSOR ಪ್ರೊವೈಡರ್ ಅನ್ನು ಬಿಟ್ಟುಬಿಡುವುದು. ಇದು ಮೌನ ಕೊಲೆಗಾರನಿದ್ದಂತೆ. ನೀವು ನಾಲ್ಕು ಮೆಥಡ್ಗಳನ್ನು ಇಂಪ್ಲಿಮೆಂಟ್ ಮಾಡಿದರೂ, ನಿಮ್ಮ ಕಂಪೊನೆಂಟ್ನ providers ಅರೇಗೆ NG_VALUE_ACCESSOR ಅನ್ನು ಸೇರಿಸಲು ಮರೆತರೆ, Angular ನಿಮ್ಮ ಕಂಪೊನೆಂಟ್ ಅನ್ನು ವ್ಯಾಲ್ಯೂ ಅಕ್ಸೆಸರ್ ಆಗಿ ಎಂದಿಗೂ ನೋಂದಾಯಿಸುವುದಿಲ್ಲ. ಕೋಡ್ ಕಂ编译 (compile) ಆಗುತ್ತದೆ, ವ್ಯೂ ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಆದರೆ ಯಾವುದೂ ಬೈಂಡ್ ಆಗುವುದಿಲ್ಲ. ಯಾವುದೇ ಎರರ್ ಮೆಸೇಜ್ ಬರುವುದಿಲ್ಲ, ಕೇವಲ ಕಂಪೊನೆಂಟ್ ಫಾರ್ಮ್ನಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಹೊರಗುಳಿದಂತೆ ಕಾಣುತ್ತದೆ. ಯಾವಾಗಲೂ ಇದನ್ನು ಡೆಕೋರೇಟರ್ ಮೆಟಾಡಾಟಾದಲ್ಲಿ (decorator metadata) ಸೇರಿಸಿ.
Signals, Validators, ಮತ್ತು ಮಾಡರ್ನ್ Angular
ControlValueAccessor ಎಂಬುದು ಹಳೆಯ (legacy) API ಅಲ್ಲ. ಇದು ಮಾಡರ್ನ್ Angular ಅಭಿವೃದ್ಧಿಗೆ ಸುಲಲಿತವಾಗಿ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. ನೀವು ಆಂತರಿಕ ಸ್ಥಿತಿಯನ್ನು Signals, ಪ್ಲೇನ್ ಪ್ರಾಪರ್ಟೀಸ್ ಅಥವಾ RxJS subjects ಮೂಲಕ ನಿರ್ವಹಿಸಿದರೂ ಸಹ, ಆ ನಾಲ್ಕು ಮೆಥಡ್ಗಳು ಫಾರ್ಮ್ಸ್ ಮಾಡ್ಯೂಲ್ನೊಂದಿಗೆ ನಿಮ್ಮ ಸಾರ್ವಜನಿಕ ಒಪ್ಪಂದವಾಗಿ (public contract) ಉಳಿಯುತ್ತವೆ. ನೀವು writeValue ನಲ್ಲಿ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತೀರಿ, ನಿಮ್ಮ Signals ಅಥವಾ ಸ್ಥಿತಿಯನ್ನು ಬದಲಾಯಿಸುತ್ತೀರಿ ಮತ್ತು Angular ಒದಗಿಸುವ ಕಾಲ್ಬ್ಯಾಕ್ಗಳ ಮೂಲಕ ಹೊರಸೂಸುತ್ತೀರಿ (emit).
ಸ್ಟ್ಯಾಂಡರ್ಡ್ ವ್ಯಾಲಿಡೇಟರ್ಗಳು ಯಾವುದೇ ಬದಲಾವಣೆ ಇಲ್ಲದೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ. Validators.required, Validators.min, Validators.pattern, ಮತ್ತು ಕಸ್ಟಮ್ ಕ್ರಾಸ್-ಫೀಲ್ಡ್ ವ್ಯಾಲಿಡೇಟರ್ಗಳು ನಿಮ್ಮ CVA-ಬ್ಯಾಕ್ಡ್ ಕಂಪೊನೆಂಟ್ ಅನ್ನು ನೇಟಿವ್ ಇನ್ಪುಟ್ನಂತೆಯೇ ಮೌಲ್ಯಮಾಪನ ಮಾಡುತ್ತವೆ. ಫಾರ್ಮ್ ಕಂಟ್ರೋಲ್ ಕೇವಲ ಮೌಲ್ಯ ಮತ್ತು ಸ್ಥಿತಿಯನ್ನು ನೋಡುತ್ತದೆ. ಆ ಮೌಲ್ಯವು ಟೆಕ್ಸ್ಟ್ ಬಾಕ್ಸ್ನಿಂದ ಬಂದಿದೆಯೇ ಅಥವಾ ಕೈಯಿಂದ ತಯಾರಿಸಿದ ಮಂತ್-ಪಿಕ್ಕರ್ನಿಂದ (month-picker) ಬಂದಿದೆಯೇ ಎಂಬುದು ಅದಕ್ಕೆ ಮುಖ್ಯವಲ್ಲ.
ಈ ಪೋರ್ಟಬಿಲಿಟಿ (portability) ಕಾರಣದಿಂದಲೇ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ಗಳು ಮತ್ತು ಶೇರ್ಡ್ UI ಲೈಬ್ರರಿಗಳಿಗೆ CVA ಮುಖ್ಯವಾಗಿದೆ. ಒಂದು ತಂಡವು ಬಲವಾದ ಫೋನ್-ನಂಬರ್ ಇನ್ಪುಟ್ ಅಥವಾ ಫೈಲ್ ಅಪ್ಲೋಡ್ ವಿಜೆಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. ಅವರು ಒಮ್ಮೆ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಇಂಪ್ಲಿಮೆಂಟ್ ಮಾಡುತ್ತಾರೆ. ಸಂಸ್ಥೆಯ ಇತರ ಎಲ್ಲಾ ತಂಡಗಳು ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ವೈರಿಂಗ್ ಇಲ್ಲದೆ ಅದನ್ನು ತಮ್ಮ Reactive Forms ಗೆ ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಕಂಪೊನೆಂಟ್ ಅನಿರೀಕ್ಷಿತವಾಗಿ ವರ್ತಿಸದೆ, ಏಕರೂಪವಾಗಿ ವ್ಯಾಲಿಡೇಟ್ ಆಗುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಫೀಚರ್ ಮಾಡ್ಯೂಲ್ನಲ್ಲಿ ಸ್ಥಿರವಾಗಿ ಡಿಸೇಬಲ್ ಆಗುತ್ತದೆ.
ನಿಜವಾದ ಸಾರಾಂಶ
ControlValueAccessor ಎಂಬುದು ಕೇವಲ ಇಂಟರ್ವ್ಯೂ ಪ್ರಶ್ನೆಗಳಿಗಾಗಿ ನೆನಪಿಟ್ಟುಕೊಳ್ಳಬೇಕಾದ ಇಂಟರ್ಫೇಸ್ ಅಲ್ಲ. ಇದು ನಿಮ್ಮ ಕಸ್ಟಮ್ ಕಂಪೊನೆಂಟ್ಗಳು ನೇಟಿವ್ HTML ಎಲಿಮೆಂಟ್ಗಳಷ್ಟೇ ಸಮಾನವಾಗಿ Angular ನ ಫಾರ್ಮ್ ಎಕೋಸಿಸ್ಟಮ್ನಲ್ಲಿ ಭಾಗವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುವ ಸೇತುವೆಯಾಗಿದೆ. ಇದನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು ಎಂದರೆ ನಿಮ್ಮ ವಿಜೆಟ್ ಮತ್ತು ಫಾರ್ಮ್ ನಡುವಿನ ಸಂಪೂರ್ಣ ಸಂಭಾಷಣೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಎಂದರ್ಥ: ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುವುದು, ಬದಲಾವಣೆಗಳನ್ನು ವರದಿ ಮಾಡುವುದು, ಟಚ್ಗಳನ್ನು ತಿಳಿಸುವುದು ಮತ್ತು ಡಿಸೇಬಲ್ ಸ್ಥಿತಿಗಳನ್ನು ಗೌರವಿಸುವುದು. ಈ ನಾಲ್ಕು ಅಂಶಗಳನ್ನು ಸರಿಯಾಗಿ ಮಾಡಿಕೊಂಡರೆ, ನೀವು ಸಂಕೀರ್ಣವಾದ ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಫಾರ್ಮ್ ಕಂಟ್ರೋಲ್ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು, ಅವುಗಳನ್ನು ಬಳಸುವ ડેವಲಪರ್ಗಳಿಗೆ ಅವು ಅತೀ ಸರಳವಾಗಿ ಮತ್ತು ಅತೀ ಸುಲಭವಾಗಿ ಕಾಣಿಸುತ್ತವೆ. ಇದೇ ಒಬ್ಬ ವೃತ್ತಿಪರ Angular ಕಂಪೊನೆಂಟ್ನ ಲಕ್ಷಣ.