Angular forms standard HTML ਨਾਲ ਬਹੁਤ ਵਧੀਆ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ। input, textarea, ਅਤੇ select ਸਾਰੇ ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ ਕੋਸ਼ਿਸ਼ ਦੇ Reactive Forms ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਫਿੱਟ ਹੋ ਜਾਂਦੇ ਹਨ। ਫਰੇਮਵਰਕ ਉਹਨਾਂ ਦੇ events, ਉਹਨਾਂ ਦੀਆਂ values, ਅਤੇ ਉਹਨਾਂ ਦੀਆਂ states ਨੂੰ ਸਮਝਦਾ ਹੈ।
ਪਰ ਆਧੁਨਿਕ ਐਪਲੀਕੇਸ਼ਨਾਂ ਸ਼ਾਇਦ ਹੀ ਸਿਰਫ਼ standard elements ਨਾਲ ਚੱਲ ਸਕਦੀਆਂ ਹਨ। ਤੁਹਾਨੂੰ ਇੱਕ star rating widget, ਇੱਕ composite date selector, ਜਾਂ ਇੱਕ custom color picker ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ ਨੂੰ form group ਵਿੱਚ ਪਾਓ, ਅਤੇ Angular ਇਸਨੂੰ ਇੱਕ ਮੁਰਦਾ (dead) HTML ਵਾਂਗ ਮੰਨੇਗਾ। patchValue ਕੁਝ ਨਹੀਂ ਕਰਦਾ। Validators ਇਸਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰ ਦਿੰਦੇ ਹਨ। ਫਾਰਮ ਨੂੰ ਇਸ ਗੱਲ ਦਾ ਕੋਈ ਅਹਿਸਾਸ ਨਹੀਂ ਹੁੰਦਾ ਕਿ ਉਪਭੋਗਤਾ (user) ਕੰਟਰੋਲ ਨਾਲ ਕਦੋਂ ਇੰਟਰੈਕਟ ਕਰਦਾ ਹੈ, ਅਤੇ form.disable() custom widget ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ interactive ਹੀ ਰੱਖਦਾ ਹੈ।
ਇਹ ਉਹ ਸਮੱਸਿਆ ਹੈ ਜਿਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ControlValueAccessor ਬਣਾਇਆ ਗਿਆ ਹੈ।
ControlValueAccessor ਅਸਲ ਵਿੱਚ ਕੀ ਕਰਦਾ ਹੈ
ControlValueAccessor ਉਹ contract ਹੈ ਜੋ ਇੱਕ custom component ਨੂੰ ਇੱਕ first-class form citizen ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਇਹ Angular Forms API ਅਤੇ ਤੁਹਾਡੇ ਆਪਣੇ UI ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਅਨੁਵਾਦਕ (translator) ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ implement ਕਰ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡਾ component ਫਾਰਮ ਦੇ ਨਜ਼ਰੀਏ ਤੋਂ ਇੱਕ native input ਤੋਂ ਵੱਖਰਾ ਨਹੀਂ ਰਹਿੰਦਾ। ਇਹ ਇੱਕ built-in element ਵਾਂਗ values ਪ੍ਰਾਪਤ ਕਰ ਸਕਦਾ ਹੈ, changes emit ਕਰ ਸਕਦਾ ਹੈ, touches report ਕਰ ਸਕਦਾ ਹੈ, ਅਤੇ disabled states ਦਾ ਸਤਿਕਾਰ ਕਰ ਸਕਦਾ ਹੈ।
ਇਸ interface ਲਈ ਚਾਰ ਖਾਸ methods ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਹਰੇਕ method ਸੰਚਾਰ (communication) ਦੀ ਇੱਕ ਵੱਖਰੀ ਦਿਸ਼ਾ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।
writeValue: Form ਤੋਂ Component ਤੱਕ
writeValue(obj) inbound lane ਹੈ। ਜਦੋਂ ਵੀ form model update ਹੁੰਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ UI ਵਿੱਚ ਇੱਕ ਨਵੀਂ value ਭੇਜਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, Angular ਇਸ method ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ form group 'ਤੇ patchValue({ rating: 4 }) ਨੂੰ invoke ਕਰਦੇ ਹੋ, ਤਾਂ 4 ਦੀ ਉਹ value writeValue ਰਾਹੀਂ ਤੁਹਾਡੇ component ਦੇ ਅੰਦਰ ਆ ਜਾਂਦੀ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਫਾਰਮ ਨੂੰ reset ਕਰਦੇ ਹੋ, ਤਾਂ writeValue ਨਵੀਂ initial value ਜਾਂ null ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਇਸ method ਦੇ ਅੰਦਰ ਤੁਹਾਡਾ ਕੰਮ ਉਸ ਆਉਣ ਵਾਲੇ ਡੇਟਾ ਨੂੰ ਲੈਣਾ ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ component ਦੀ internal state ਨਾਲ ਮੈਪ ਕਰਨਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ color picker ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ writeValue ਇੱਕ hex string ਜਿਵੇਂ ਕਿ #ff4400 ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਉਸ ਰੰਗ ਨੂੰ ਚੁਣਿਆ ਹੋਇਆ ਦਿਖਾਉਣ ਲਈ ਆਪਣੇ view ਨੂੰ update ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।
ਇੱਥੇ ਇੱਕ ਵਿਹਾਰਕ (practical) ਮੁਸ਼ਕਲ ਆ ਸਕਦੀ ਹੈ। Angular ਤੁਹਾਡੇ view ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ initialize ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਹੀ writeValue ਨੂੰ ਕਾਲ ਕਰ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ dynamically rendered components, dialogs, ਜਾਂ tabbed interfaces ਦੇ ਅੰਦਰ। ਜੇਕਰ ਤੁਹਾਡਾ component ਬਹੁਤ ਜਲਦੀ DOM ਜਾਂ child components ਨੂੰ touch ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ runtime errors ਆ ਸਕਦੇ ਹਨ। ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ value ਨੂੰ ਇੱਕ local property ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਜਾਵੇ ਅਤੇ view initialize ਹੋਣ ਤੋਂ ਬਾਅਦ ਇਸਨੂੰ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇ, ਜਾਂ undefined child references ਤੋਂ ਬਚਣ ਲਈ guard ਲਗਾਇਆ ਜਾਵੇ। ਕਦੇ ਵੀ ਇਹ ਨਾ ਮੰਨੋ ਕਿ writeValue ਸਿਰਫ਼ ਉਦੋਂ ਹੀ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਤੁਹਾਡਾ template stable ਹੁੰਦਾ ਹੈ।
registerOnChange: Component ਤੋਂ Form ਤੱਕ
registerOnChange(fn) outbound lane ਸੈੱਟ ਕਰਦਾ ਹੈ। Angular ਤੁਹਾਨੂੰ ਇੱਕ callback function ਦਿੰਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਇਸਦਾ reference ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ। ਹਰ ਵਾਰ ਜਦੋਂ user ਤੁਹਾਡੇ component ਦੇ ਅੰਦਰ value ਬਦਲਦਾ ਹੈ, ਤੁਸੀਂ ਉਸ function ਨੂੰ ਨਵੀਂ value ਦੇ ਨਾਲ ਕਾਲ ਕਰਦੇ ਹੋ। ਇੱਕ star rating component ਵਿੱਚ, ਜਦੋਂ user ਤੀਜੇ ਸਿਤਾਰੇ 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਸਟੋਰ ਕੀਤੇ ਗਏ callback ਨੂੰ 3 ਦੇ ਨਾਲ invoke ਕਰਦੇ ਹੋ। ਉਹ ਕਾਲ ਵਾਪਸ FormControl ਵਿੱਚ ਜਾਂਦੀ ਹੈ, model ਨੂੰ update ਕਰਦੀ ਹੈ, ਕਿਸੇ ਵੀ valueChanges subscriptions ਨੂੰ trigger ਕਰਦੀ ਹੈ, ਅਤੇ validators ਨੂੰ ਦੁਬਾਰਾ ਚਲਾਉਂਦੀ ਹੈ।
ਇਸ ਕਦਮ ਨੂੰ ਛੱਡਣਾ ਫਾਰਮ ਨੂੰ ਚੁੱਪਚਾਪ ਖਰਾਬ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਆਮ ਤਰੀਕਾ ਹੈ। Widget ਸ਼ਾਇਦ ਜੀਵਤ (alive) ਲੱਗੇ। User ਸਿਤਾਰਿਆਂ ਨੂੰ ਜਗਦੇ ਹੋਏ, ਰੰਗਾਂ ਨੂੰ ਬਦਲਦੇ ਹੋਏ, ਜਾਂ ਤਾਰੀਖਾਂ ਨੂੰ ਭਰਦੇ ਹੋਏ ਦੇਖਦਾ ਹੈ। ਪਰ form model ਕਦੇ update ਨਹੀਂ ਹੁੰਦਾ। Validators ਪੁਰਾਣੇ (stale) ਡੇਟਾ ਦਾ ਮੁਲਾਂਕਣ ਕਰਦੇ ਰਹਿੰਦੇ ਹਨ। Submit handlers ਪੁਰਾਣੀਆਂ values ਭੇਜਦੇ ਹਨ। Component ਕੰਮ ਕਰਦਾ ਹੋਇਆ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਫਿਰ ਵੀ ਫਾਰਮ ਅਸਲ ਵਿੱਚ ਅੰਨ੍ਹਾ (blind) ਹੁੰਦਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਡਾ custom control user input ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ ਪਰ ਆਲੇ-ਦੁਆਲੇ ਦਾ ਫਾਰਮ ਇਸਨੂੰ ਕਦੇ ਨੋਟ ਨਹੀਂ ਕਰਦਾ, ਤਾਂ ਇਹ ਲਗਭਗ ਹਮੇਸ਼ਾ ਇਸਦਾ ਕਾਰਨ ਹੁੰਦਾ ਹੈ।
registerOnTouched: Interaction ਦੀ ਰਿਪੋਰਟ ਕਰਨਾ
ਫਾਰਮ ਸਿਰਫ਼ values ਨੂੰ ਹੀ track ਨਹੀਂ ਕਰਦੇ। ਉਹ ਇਹ ਵੀ track ਕਰਦੇ ਹਨ ਕਿ ਕੀ user ਨੇ ਕਿਸੇ field ਨਾਲ ਇੰਟਰੈਕਟ ਕੀਤਾ ਹੈ। Angular validation errors ਦਿਖਾਉਣ ਲਈ 'touched state' ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇੱਕ required text input ਨੂੰ ਪੇਜ ਲੋਡ ਹੁੰਦੇ ਹੀ ਲਾਲ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ। ਇਸਨੂੰ ਉਦੋਂ ਤੱਕ ਉਡੀਕ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਜਦੋਂ ਤੱਕ user tab away ਨਹੀਂ ਕਰਦਾ ਜਾਂ ਕਿਤੇ ਹੋਰ ਕਲਿੱਕ ਨਹੀਂ ਕਰਦਾ।
Native inputs ਇਸਨੂੰ blur events ਰਾਹੀਂ ਆਪਣੇ ਆਪ ਸੰਭਾਲ ਲੈਂਦੇ ਹਨ। Custom components ਅਜਿਹਾ ਨਹੀਂ ਕਰਦੇ। ਤੁਹਾਨੂੰ ਇਹਨਾਂ interactions ਦੀ ਰਿਪੋਰਟ ਕਰਨ ਲਈ ਖੁਦ registerOnTouched(fn) ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ। Angular ਤੁਹਾਨੂੰ ਇੱਕ ਹੋਰ callback ਦਿੰਦਾ ਹੈ; ਤੁਸੀਂ ਇਸਨੂੰ ਉਦੋਂ ਕਾਲ ਕਰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਫੈਸਲਾ ਕਰਦੇ ਹੋ ਕਿ user ਨੇ ਕੰਟਰੋਲ ਨਾਲ ਮਤਲਬਪੂਰਨ ਤਰੀਕੇ ਨਾਲ ਇੰਟਰੈਕਟ ਕੀਤਾ ਹੈ।
ਸਹੀ ਸਮਾਂ ਤੁਹਾਡੇ component 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। Text-like custom input ਲਈ, ਤੁਸੀਂ ਇਸਨੂੰ blur 'ਤੇ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ। Star rating ਲਈ, ਪਹਿਲਾ ਕਲਿੱਕ ਸ਼ਾਇਦ ਸਹੀ ਸਮਾਂ ਹੈ। Color picker ਲਈ ਜੋ popover ਖੋਲ੍ਹਦਾ ਹੈ, ਤੁਸੀਂ palette ਬੰਦ ਹੋਣ ਤੱਕ ਉਡੀਕ ਕਰ ਸਕਦੇ ਹੋ। ਮੁੱਖ ਗੱਲ ਇਕਸਾਰਤਾ (consistency) ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਕਦੇ ਵੀ touched callback ਨੂੰ ਕਾਲ ਨਹੀਂ ਕਰਦੇ, ਤਾਂ Angular ਕੰਟਰੋਲ ਨੂੰ pristine ਵਜੋਂ ਮਾਰਕ ਕਰਦਾ ਰਹਿੰਦਾ ਹੈ। Validation errors ਉਦੋਂ ਵੀ ਲੁਕੇ ਰਹਿੰਦੇ ਹਨ ਜਦੋਂ user ਨੇ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਐਡਿਟ ਕਰਨਾ ਖਤਮ ਕਰ ਲਿਆ ਹੋਵੇ। ਇਸ ਨਾਲ ਉਲਝਣ ਅਤੇ ਮਾੜਾ user experience ਹੁੰਦਾ ਹੈ।
setDisabledState: ਫਾਰਮ ਕਮਾਂਡਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨਾ
ਡਾਇਨਾਮਿਕ ਫਾਰਮ ਬਿਜ਼ਨਸ ਲੌਜਿਕ ਦੇ ਆਧਾਰ 'ਤੇ ਲਗਾਤਾਰ ਫੀਲਡਾਂ ਨੂੰ ਇਨੇਬਲ (enable) ਅਤੇ ਡਿਸਏਬਲ (disable) ਕਰਦੇ ਰਹਿੰਦੇ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ FormControl 'ਤੇ .disable() ਕਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ Angular ਨੂੰ ਤੁਹਾਡੇ ਕਸਟਮ ਕੰਪੋਨੈਂਟ ਤੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। setDisabledState(isDisabled) ਇੱਕ ਬੂਲੀਅਨ (boolean) ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਇਹ true ਹੁੰਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਆਪਣੇ UI ਨੂੰ ਲੌਕ ਕਰ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ।
ਇਸਦਾ ਮਤਲਬ ਸਿਰਫ਼ ਕਲਿੱਕਾਂ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਨਾ ਹੀ ਨਹੀਂ ਹੈ। ਤੁਹਾਨੂੰ ਅੰਦਰੂਨੀ ਬਟਨਾਂ ਨੂੰ ਡਿਸਏਬਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਫੋਕਸ ਕਰਨ ਯੋਗ ਸਟੇਟਾਂ (focusable states) ਨੂੰ ਹਟਾਉਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਘੱਟ ਓਪੈਸਿਟੀ (reduced opacity) ਜਾਂ pointer-events: none ਵਰਗੇ ਵਿਜ਼ੂਅਲ ਇਲਾਜ ਲਾਗੂ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਮੈਥਡ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡਾ ਕੰਪੋਨੈਂਟ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇੰਟਰਐਕਟਿਵ ਰਹਿੰਦਾ ਹੈ ਜਦੋਂ ਕਿ ਫਾਰਮ ਮਾਡਲ ਇਹ ਜ਼ੋਰ ਦੇ ਕੇ ਕਹਿੰਦਾ ਹੈ ਕਿ ਇਹ ਡਿਸਏਬਲ ਹੈ। ਇਸ ਨਾਲ ਅਜਿਹੇ ਬੱਗ (bugs) ਪੈਦਾ ਹੁੰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਲੱਭਣਾ ਮੁਸ਼ਕਲ ਹੁੰਦਾ ਹੈ। ਯੂਜ਼ਰ ਉਹਨਾਂ ਵੈਲਯੂਜ਼ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਫਾਰਮ ਸ਼ਾਇਦ ਰੱਦ ਕਰ ਰਿਹਾ ਹੋਵੇ। ਸੇਵ ਬਟਨ ਅਵੈਲਿਡ ਸਟੇਟਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਇਨੇਬਲ ਹੋ ਸਕਦੇ ਹਨ। ਫਾਰਮ ਗਰੁੱਪ ਅਤੇ UI ਇੱਕ ਦੂਜੇ ਤੋਂ ਵੱਖ ਹੋ ਜਾਂਦੇ ਹਨ।
ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਬਣਾਇਆ ਗਿਆ ਕਸਟਮ ਕੰਟਰੋਲ setDisabledState ਨੂੰ ਇੱਕ ਮੁੱਖ ਲੋੜ ਵਜੋਂ ਮੰਨਦਾ ਹੈ, ਨਾ ਕਿ ਬਾਅਦ ਵਿੱਚ ਸੋਚੀ ਗਈ ਚੀਜ਼ ਵਜੋਂ।
ਗਲਤੀਆਂ ਜੋ ਤੁਹਾਡਾ ਡੀਬੱਗਿੰਗ ਸਮਾਂ ਬਰਬਾਦ ਕਰਨਗੀਆਂ
ਕਈ ਵਾਰ ਹੋਣ ਵਾਲੀਆਂ ਗਲਤੀਆਂ ਉਹਨਾਂ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਉਲਝਾ ਦਿੰਦੀਆਂ ਹਨ ਜੋ ਇਸ ਇੰਟਰਫੇਸ ਦੇ ਨਵੇਂ ਹਨ।
Change callback ਨੂੰ ਕਾਲ ਕਰਨਾ ਭੁੱਲ ਜਾਣਾ। ਤੁਹਾਡਾ ਕੰਪੋਨੈਂਟ ਆਪਣੀ ਅੰਦਰੂਨੀ ਸਟੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ, ਪਰ ਫਾਰਮ ਨੂੰ ਇਸ ਬਾਰੇ ਕਦੇ ਪਤਾ ਨਹੀਂ ਲੱਗਦਾ। Validators ਰੁਕ ਜਾਂਦੇ ਹਨ, ਅਤੇ ਪੇਰੈਂਟ ਫਾਰਮ ਪੁਰਾਣਾ (stale) ਡੇਟਾ ਸਬਮਿਟ ਕਰਦੇ ਹਨ। ਜਦੋਂ ਵੀ ਯੂਜ਼ਰ ਨਵੀਂ ਵੈਲਯੂ ਦਰਜ ਕਰਦਾ ਹੈ, ਤਾਂ ਹਮੇਸ਼ਾ ਉਸ ਸਟੋਰ ਕੀਤੇ onChange ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਓ।
Touched callback ਨੂੰ ਛੱਡ ਦੇਣਾ। ਇਸ ਤੋਂ ਬਿਨਾਂ, Angular ਕੰਟਰੋਲ ਨੂੰ ਕਦੇ ਵੀ touched ਵਜੋਂ ਮਾਰਕ ਨਹੀਂ ਕਰਦਾ। touched ਜਾਂ dirty ਸਟੇਟਾਂ ਨਾਲ ਜੁੜੇ ਐਰਰ ਮੈਸੇਜ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੇ। ਯੂਜ਼ਰ ਇੱਕ ਅਜਿਹੇ ਫਾਰਮ ਵੱਲ ਦੇਖਦੇ ਰਹਿੰਦੇ ਹਨ ਜੋ ਸਹੀ ਲੱਗਦਾ ਹੈ ਪਰ ਸਬਮਿਟ ਨਹੀਂ ਹੁੰਦਾ, ਅਤੇ ਇਹ ਵੀ ਪਤਾ ਨਹੀਂ ਲੱਗਦਾ ਕਿ ਕੀ ਗਲਤ ਹੈ।
Disabled state ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਨਾ। ਇੱਕ ਵਿਜ਼ੂਅਲੀ ਇਨੇਬਲ ਕੰਟਰੋਲ ਜਿਸਨੂੰ ਫਾਰਮ ਡਿਸਏਬਲ ਸਮਝਦਾ ਹੈ, ਇੱਕ ਟੁੱਟਿਆ ਹੋਇਆ ਭਰੋਸਾ ਪੈਦਾ ਕਰਦਾ ਹੈ। ਯੂਜ਼ਰ ਟਾਈਪ ਕਰਨਾ ਜਾਂ ਕਲਿੱਕ ਕਰਨਾ ਜਾਰੀ ਰੱਖ ਸਕਦਾ ਹੈ, ਪਰ ਮਾਡਲ ਉਹਨਾਂ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰ ਦਿੰਦਾ ਹੈ। ਜਾਂ ਇਸ ਤੋਂ ਵੀ ਮਾੜਾ, ਮਾਡਲ ਸਿੰਕ ਸਾਈਕਲਾਂ ਦੌਰਾਨ ਉਹਨਾਂ ਦੇ ਇਨਪੁਟ ਨੂੰ ਕਦੇ-ਕਦੇ ਓਵਰਰਾਈਟ (overwrite) ਕਰ ਦਿੰਦਾ ਹੈ।
NG_VALUE_ACCESSOR provider ਨੂੰ ਛੱਡ ਦੇਣਾ। ਇਹ ਇੱਕ ਚੁੱਪ ਰਹਿਣ ਵਾਲਾ ਕਤਲ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਚਾਰ ਮੈਥਡ ਲਾਗੂ ਕਰਦੇ ਹੋ ਪਰ ਆਪਣੇ ਕੰਪੋਨੈਂਟ ਦੇ providers ਐਰੇ ਵਿੱਚ NG_VALUE_ACCESSOR ਨੂੰ ਜੋੜਨਾ ਭੁੱਲ ਜਾਂਦੇ ਹੋ, ਤਾਂ Angular ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟ ਨੂੰ ਕਦੇ ਵੀ value accessor ਵਜੋਂ ਰਜਿਸਟਰ ਨਹੀਂ ਕਰਦਾ। ਕੋਡ ਕੰਪਾਈਲ ਹੁੰਦਾ ਹੈ। ਵਿਊ ਰੈਂਡਰ ਹੁੰਦੀ ਹੈ। ਪਰ ਕੁਝ ਵੀ ਬਾਈਂਡ (bind) ਨਹੀਂ ਹੁੰਦਾ। ਕੋਈ ਐਰਰ ਮੈਸੇਜ ਨਹੀਂ ਆਉਂਦਾ, ਬੱਸ ਇੱਕ ਕੰਪੋਨੈਂਟ ਹੁੰਦਾ ਹੈ ਜੋ ਪੂਰੀ ਤਰ੍ਹਾਂ ਫਾਰਮ ਤੋਂ ਬਾਹਰ ਰਹਿੰਦਾ ਹੈ। ਇਸਨੂੰ ਹਮੇਸ਼ਾ ਡੈਕੋਰੇਟਰ ਮੈਟਾਡਾਟਾ (decorator metadata) ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।
Signals, Validators, ਅਤੇ Modern Angular
ControlValueAccessor ਕੋਈ ਪੁਰਾਣੀ (legacy) API ਸਤ੍ਹਾ ਨਹੀਂ ਹੈ। ਇਹ ਆਧੁਨਿਕ Angular ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਬਹੁਤ ਵਧੀਆ ਤਰੀਕੇ ਨਾਲ ਫਿੱਟ ਹੁੰਦਾ ਹੈ। ਭਾਵੇਂ ਤੁਸੀਂ Signals, ਸਾਧਾਰਨ ਪ੍ਰੌਪਰਟੀਜ਼ (plain properties), ਜਾਂ RxJS subjects ਨਾਲ ਅੰਦਰੂਨੀ ਸਟੇਟ ਨੂੰ ਮੈਨੇਜ ਕਰਦੇ ਹੋ, ਚਾਰ ਮੈਥਡ ਫਾਰਮ ਮੋਡਿਊਲ ਨਾਲ ਤੁਹਾਡਾ ਪਬਲਿਕ ਕੰਟਰੈਕਟ ਰਹਿੰਦੇ ਹਨ। ਤੁਸੀਂ writeValue ਵਿੱਚ ਵੈਲਯੂਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਆਪਣੇ Signals ਜਾਂ ਸਟੇਟ ਨੂੰ ਬਦਲਦੇ ਹੋ, ਅਤੇ Angular ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੇ ਗਏ ਕਾਲਬੈਕਸ ਰਾਹੀਂ ਐਮਿਟ (emit) ਕਰਦੇ ਹੋ।
ਸਟੈਂਡਰਡ ਵੈਲੀਡੇਟਰਸ (Standard validators) ਬਿਨਾਂ ਕਿਸੇ ਬਦਲਾਅ ਦੇ ਕੰਮ ਕਰਦੇ ਹਨ। Validators.required, Validators.min, Validators.pattern, ਅਤੇ ਕਸਟਮ ਕਰਾਸ-ਫੀਲਡ ਵੈਲੀਡੇਟਰਸ ਸਾਰੇ ਤੁਹਾਡੇ CVA-ਬੈਕਡ ਕੰਪੋਨੈਂਟ ਦਾ ਮੁਲਾਂਕਣ ਬਿਲਕੁਲ ਉਸੇ ਤਰ੍ਹਾਂ ਕਰਦੇ ਹਨ ਜਿਵੇਂ ਉਹ ਇੱਕ ਨੇਟਿਵ ਇਨਪੁਟ ਦਾ ਕਰਦੇ ਹਨ। ਫਾਰਮ ਕੰਟਰੋਲ ਇੱਕ ਵੈਲਯੂ ਅਤੇ ਇੱਕ ਸਟੇਟ ਦੇਖਦਾ ਹੈ। ਇਸਨੂੰ ਇਸ ਨਾਲ ਕੋਈ ਫਰਕ ਨਹੀਂ ਪੈਂਦਾ ਕਿ ਉਹ ਵੈਲਯੂ ਕਿਸੇ ਟੈਕਸਟ ਬਾਕਸ ਤੋਂ ਆਈ ਹੈ ਜਾਂ ਕਿਸੇ ਹੱਥ ਨਾਲ ਬਣਾਏ ਗਏ ਮੌਂਥ-ਪਿਕਰ (month-picker) ਤੋਂ।
ਇਹੀ ਪੋਰਟੇਬਿਲਟੀ (portability) ਹੈ ਕਿਉਂਕਿ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਅਤੇ ਸਾਂਝੀਆਂ UI ਲਾਇਬ੍ਰੇਰੀਆਂ ਲਈ CVA ਮਹੱਤਵਪੂਰਨ ਹੈ।