# FieldControl
A react component which creates a new or can be used with an existing [FormControl](FormControl.md) control.

## How it works
 - It creates a new instance of [FormControl](FormControl.md) if the `name` prop is defined.
 - If a `name` prop is defined then it means that the control has to be added in an already existing parent control (  [FormGroup](FormGroup.md) / [FormArray](FormArray.md)) i.e the parent control must be present.
 - If a control with the same name is already present in the parent control then it just returns the same otherwise it'll create a new instance of [FormControl](FormControl.md) class. 
 - You can define a parent control either by passing the `parent` prop or using the component as a child of the `FieldArray` or `FieldGroup` component.
 - If a `control` prop is defined then it just returns the same.


## Props
```ts
strict: boolean;
```
Default value: `true`

If `true` then it'll only re-render the component only when any change happens in the form control irrespective of the parent component(state and props) changes.

##

```ts
formState: any|{ value: any, disabled: boolean }
```
You can use this prop to define the initial state of the control.
For e.g
 - To set an initial value
  ```ts
  <FieldControl
    formState="InitialValue"
  />
  ```
- To set a form control with initial state as disabled
```ts
  <FieldControl
    formState={ value: "InitialValue", disabled: true }
  />
  ```
##

```ts
    render: (control: FormArray|FormControl|FormGroup) => React.ReactElement<any>|React.ReactElement<any>[];
```
A render function prop which returns a react component which needs to be re-render whenever the control state changes.
You can also pass a render function as a child.
For eg.

```ts
  <FieldControl ...>
  {
    (control) => <SomeComponent/>
  }
  </FieldControl>
```

##
```ts
control: AbstractControl;
```
An instance of [FieldControl](FieldControl.md) control.

##
```ts
name: string;
```
Name of the control.

##
```ts
index: number
```
To define at which index the controls has to be inserted if the parent control is an instance of [FormArray](FormArray.md).

##
```ts
options: AbstractControlOptions;
```
You can pass the [AbstractControlOptions](AbstractControlOptions.md) as `options` props.

For eg.

```ts
<FieldControl
  options={{
    validators: Validators.required,
    updateOn: 'blur'
  }}
/>
```

##
```ts
parent: AbstractControl;
```
An instance of FormGroup or FormArray class as a parent control.

##
```ts
meta: {[key: string]: any};
```
You can pass an object of custom variables to customize your component.

For example:

```ts
<FieldControl
  meta={{
    label: "First Name",
    placeholder: "Enter your first name"
  }}
 ...
/>
```