[@rxap/form-system](../wiki/globals) / FormSystemControlDirective # Class: FormSystemControlDirective\ Defined in: [packages/angular/form-system/src/lib/form-system-control.directive.ts:36](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/form-system-control.directive.ts#L36) ## Extends - [`ExtractDataSourcesMixin`](../wiki/Class.ExtractDataSourcesMixin).`ControlValueAccessor`.`OnInit` ## Type Parameters • **T** ## Implements - `ControlValueAccessor` - `OnInit` ## Constructors ### new FormSystemControlDirective() > **new FormSystemControlDirective**\<`T`\>(`parent`, `cfr`, `viewContainerRef`, `dataSourceLoader`, `injector`): [`FormSystemControlDirective`](../wiki/Class.FormSystemControlDirective)\<`T`\> Defined in: [packages/angular/form-system/src/lib/form-system-control.directive.ts:56](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/form-system-control.directive.ts#L56) #### Parameters ##### parent `ControlContainer` ##### cfr `ComponentFactoryResolver$1` ##### viewContainerRef `ViewContainerRef` ##### dataSourceLoader `DataSourceLoader` ##### injector `Injector` #### Returns [`FormSystemControlDirective`](../wiki/Class.FormSystemControlDirective)\<`T`\> #### Inherited from [`ExtractDataSourcesMixin`](../wiki/Class.ExtractDataSourcesMixin).[`constructor`](../wiki/Class.ExtractDataSourcesMixin#constructors) ## Properties ### componentRef > `protected` **componentRef**: `ComponentRef$1`\<`ControlValueAccessor` & `Partial`\<[`ControlWithDataSource`](../wiki/Interface.ControlWithDataSource)\<`any`, `any`\>\>\> Defined in: [packages/angular/form-system/src/lib/form-system-control.directive.ts:54](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/form-system-control.directive.ts#L54) *** ### control > `protected` **control**: `RxapFormControl` Defined in: [packages/angular/form-system/src/lib/form-system-control.directive.ts:52](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/form-system-control.directive.ts#L52) *** ### controlId > **controlId**: `string` Defined in: [packages/angular/form-system/src/lib/form-system-control.directive.ts:50](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/form-system-control.directive.ts#L50) Defines the form control id ## Methods ### extractDataSources() > `protected` **extractDataSources**(`formDefinition`, `controlId`): `Map`\<`string`, [`UseDataSourceValue`](../wiki/Interface.UseDataSourceValue)\<`any`, `any`\>\> Defined in: [packages/angular/form-system/src/lib/mixins/extract-data-sources.mixin.ts:9](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/mixins/extract-data-sources.mixin.ts#L9) #### Parameters ##### formDefinition `FormDefinition` ##### controlId `string` #### Returns `Map`\<`string`, [`UseDataSourceValue`](../wiki/Interface.UseDataSourceValue)\<`any`, `any`\>\> #### Inherited from [`ExtractDataSourcesMixin`](../wiki/Class.ExtractDataSourcesMixin).[`extractDataSources`](../wiki/Class.ExtractDataSourcesMixin#extractdatasources) *** ### ngOnInit() > **ngOnInit**(): `void` Defined in: [packages/angular/form-system/src/lib/form-system-control.directive.ts:70](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/form-system-control.directive.ts#L70) A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated. #### Returns `void` #### Inherited from `OnInit.ngOnInit` *** ### registerOnChange() > **registerOnChange**(`fn`): `void` Defined in: [packages/angular/form-system/src/lib/form-system-control.directive.ts:85](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/form-system-control.directive.ts#L85) #### Parameters ##### fn (`value`) => `void` The callback function to register #### Returns `void` #### Description Registers a callback function that is called when the control's value changes in the UI. This method is called by the forms API on initialization to update the form model when values propagate from the view to the model. When implementing the `registerOnChange` method in your own value accessor, save the given function so your class calls it at the appropriate time. #### Usage Notes ### Store the change function The following example stores the provided function as an internal method. ```ts registerOnChange(fn: (_: any) => void): void { this._onChange = fn; } ``` When the value changes in the UI, call the registered function to allow the forms API to update itself: ```ts host: { '(change)': '_onChange($event.target.value)' } ``` #### Inherited from `ControlValueAccessor.registerOnChange` *** ### registerOnTouched() > **registerOnTouched**(`fn`): `void` Defined in: [packages/angular/form-system/src/lib/form-system-control.directive.ts:89](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/form-system-control.directive.ts#L89) #### Parameters ##### fn () => `void` The callback function to register #### Returns `void` #### Description Registers a callback function that is called by the forms API on initialization to update the form model on blur. When implementing `registerOnTouched` in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched". #### Usage Notes ### Store the callback function The following example stores the provided function as an internal method. ```ts registerOnTouched(fn: any): void { this._onTouched = fn; } ``` On blur (or equivalent), your class should call the registered function to allow the forms API to update itself: ```ts host: { '(blur)': '_onTouched()' } ``` #### Inherited from `ControlValueAccessor.registerOnTouched` *** ### setDisabledState() > **setDisabledState**(`isDisabled`): `void` Defined in: [packages/angular/form-system/src/lib/form-system-control.directive.ts:97](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/form-system-control.directive.ts#L97) #### Parameters ##### isDisabled `boolean` The disabled status to set on the element #### Returns `void` #### Description Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element. #### Usage Notes The following is an example of writing the disabled property to a native DOM element: ```ts setDisabledState(isDisabled: boolean): void { this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled); } ``` #### Inherited from `ControlValueAccessor.setDisabledState` *** ### writeValue() > **writeValue**(`value`): `void` Defined in: [packages/angular/form-system/src/lib/form-system-control.directive.ts:93](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/form-system/src/lib/form-system-control.directive.ts#L93) #### Parameters ##### value `any` #### Returns `void` #### Description Writes a new value to the element. This method is called by the forms API to write to the view when programmatic changes from model to view are requested. #### Usage Notes ### Write a value to the element The following example writes a value to the native DOM element. ```ts writeValue(value: any): void { this._renderer.setProperty(this._elementRef.nativeElement, 'value', value); } ``` #### Inherited from `ControlValueAccessor.writeValue`