FieldArray.md

FieldArray

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

How it works

• It creates a new instance of FormArray in absence of the name and control props.
• 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 FormArray 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 array control irrespective of the parent component(state and props) changes.

    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.

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

control: AbstractControl;

An instance of FormArray 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.

<FieldArray
  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:

<FieldArray
  meta={{
    title: "Products"
  }}
 ...
/>