va-input-repeated

The following examples exercise the various inputs.

• controlArray is the FormArray instance
• placeholder is the field label that floats when input is present
• disableAdd disables the ability to add fields
• tooltip is a tooltip
• maxFields controls the number of fields the control will allow to be added. No limit if not specified.
• errorMessages overrides the default messages for the validation type. A function can be provided that takes in the error.
  • Defaults are provided for: required, minlength, and maxlength
• itemErrorMessages overrides the array’s item’s default messages for the validation type. A function can be provided that takes in the error.
  • Defaults are provided for: required, minlength, and maxlength
• itemFactory is used to create FormControls when adding fields. An empty string value control is added if not specified.

Form controls within the array can be disabled – disabled controls cannot be removed by the user.

<va-input-repeated [placeholder]="'Placeholder'" [controlArray]="controlArray1" [tooltip]="'default validators'"></va-input-repeated>
<va-input-repeated [placeholder]="'Placeholder'" [maxFields]='3' [controlArray]="controlArray2" [tooltip]="'custom validators'" [errorMessages]="customErrorMessage" [itemErrorMessages]="customErrorMessage" [itemFactory]="emailControlFactory"></va-input-repeated>

class FormsInputRepeatedDocComponent {
    ...
    public customErrorMessage: ErrorMessagesMap = {
      'required': 'Its required!!!!',
      'maxlength': (err: any) => {
        return `Hey, thats way more than ${err.requiredLength}`;
      },
    };
    ...
    constructor(..., private fb: FormBuilder) {
        this.controlArray1 = this.fb.array([this.fb.control('')], arrayTruthyItemRequired());
        this.controlArray2 = this.fb.array([this.emailControlFactory()], Validators.compose([Validators.maxLength(3), arrayTruthyItemRequired()]));
    }
    ...
    emailControlFactory(): FormControl {
        return this.fb.control('', [Validators.email, Validators.required]);
    }
}