FieldControl.md

FieldControl

A react component which creates a new or can be used with an existing FormControl control.

How it works

• It creates a new instance of FormControl 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 / FormArray) 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 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

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.

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

<FieldControl
  formState="InitialValue"
/>

• To set a form control with initial state as disabled

  <FieldControl
    formState={ value: "InitialValue", disabled: true }
  />

    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.

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

control: AbstractControl;

An instance of FieldControl control.

name: string;

Name of the control.

index: number

To define at which index the controls has to be inserted if the parent control is an instance of FormArray.

options: AbstractControlOptions;

You can pass the AbstractControlOptions as options props.

For eg.

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

parent: AbstractControl;

An instance of FormGroup or FormArray class as a parent control.

meta: {[key: string]: any};

You can pass an object of custom variables to customize your component.

For example:

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