docs: add array controls validation example

Author: rams23

src/app/app.module.ts

@@ -30,8 +30,6 @@ export function httpLoaderFactory(http: HttpClient): TranslateLoader {
     FormsModule,
     ReactiveFormsModule,
     NgxValidationErrorsModule.forRoot({
-      defaultContext: 'CUSTOM_GENERAL',
-      errorComponent: CustomErrorsComponent as any
     }),
     TranslateModule.forRoot({
       loader: {

src/app/lazy/lazy-form/lazy-form.component.html

@@ -12,6 +12,15 @@ <h2 style="text-align: center">xtream validation errors lazy</h2>
     <label>Surmane</label>
     <input class="form-control" formControlName="surname"/>
   </div>
+  <div formArrayContainer>
+    <div formArrayName="checkBoxes" class="form-group">
+      <div *ngFor="let check of boxesInfo; let i = index">
+        <input type="checkbox" id="check_{{i}}" [formControlName]="i">
+        <label for="check_{{i}}" id="label_check_{{i}}">{{boxesInfo[i]}}</label>
+      </div>
+    </div>
+  </div>
+
   <button class="btn btn-primary" [disabled]="heroForm.invalid">Submit</button>
 
 </form>

src/app/lazy/lazy-form/lazy-form.component.ts

@@ -1,7 +1,18 @@
 import {Component, OnInit} from '@angular/core';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {AbstractControl, FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
 import {TranslateService} from '@ngx-translate/core';
 
+function minCheckSelected(size: number) {
+  return (control: AbstractControl) => {
+    const values = control.value as (boolean | undefined)[];
+    const selected = values.filter(v => !!v).length;
+    if (selected < size) {
+      return {checkBoxes: true};
+    }
+    return null;
+  };
+}
+
 @Component({
   selector: 'app-lazy-form',
   templateUrl: './lazy-form.component.html',
@@ -11,10 +22,18 @@ export class LazyFormComponent implements OnInit {
 
   heroForm: FormGroup;
 
+  boxesInfo = [
+    'a',
+    'b',
+    'c',
+    'd'
+  ];
+
   constructor(private translateService: TranslateService) {
     this.heroForm = new FormGroup({
       name: new FormControl(null, [Validators.required, Validators.minLength(4)]),
-      surname: new FormControl(null, [Validators.required, Validators.maxLength(1000)])
+      surname: new FormControl(null, [Validators.required, Validators.maxLength(1000)]),
+      checkBoxes: new FormArray(this.boxesInfo.map(a => new FormControl()), [minCheckSelected(1)])
     });
   }
 

src/assets/i18n/en.json

@@ -4,7 +4,8 @@
   },
   "GENERAL": {
     "ERRORS": {
-      "MINLENGTH": "The field it too short. You need ti insert at least {{requiredLength}}"
+      "MINLENGTH": "The field it too short. You need ti insert at least {{requiredLength}}",
+      "REQUIRED" : "The field is required"
     }
   },
   "NEW_HERO": {