fix(core): trigger validation in ArrayType on field update (#3328)

fix #3327
ngx-formly · Jun 3, 2022 · 90ef367 · 90ef367
1 parent 6e9f7ac
commit 90ef367
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/src/core/src/lib/extensions/field-form/field-form.spec.ts b/src/core/src/lib/extensions/field-form/field-form.spec.ts
@@ -54,6 +54,7 @@ describe('FieldFormExtension', () => {
   it('should add formControl for field with empty key', () => {
     const field = createField({ defaultValue: 5 });
 
+    extension.prePopulate(field.parent);
     extension.onPopulate(field);
     expect(field.formControl).toBeDefined();
     expect(field.formControl.value).toEqual(5);

diff --git a/src/core/src/lib/extensions/field-form/field-form.ts b/src/core/src/lib/extensions/field-form/field-form.ts
@@ -7,8 +7,15 @@ import { of } from 'rxjs';
 
 /** @experimental */
 export class FieldFormExtension implements FormlyExtension {
+  private root: FormlyFieldConfigCache;
   constructor(private config: FormlyConfig) { }
 
+  prePopulate(field: FormlyFieldConfigCache) {
+    if (!this.root) {
+      this.root = field;
+    }
+  }
+
   onPopulate(field: FormlyFieldConfigCache) {
     if (!field.parent) {
       return;
@@ -22,10 +29,11 @@ export class FieldFormExtension implements FormlyExtension {
   }
 
   postPopulate(field: FormlyFieldConfigCache) {
-    if (field.parent) {
+    if (this.root !== field) {
       return;
     }
 
+    this.root = null;
     this.setValidators(field);
   }
 

diff --git a/src/core/src/lib/templates/field-array.type.spec.ts b/src/core/src/lib/templates/field-array.type.spec.ts
@@ -294,6 +294,34 @@ describe('Array Field Type', () => {
     subscription.unsubscribe();
   });
 
+  it('should validate field on add/remove', () => {
+    app.fields = [
+      {
+        key: 'foo',
+        type: 'array',
+        fieldArray: { fieldGroup: [{key: 'title', templateOptions: { required: true } }] },
+        defaultValue: [{ title: 'test' }],
+      },
+    ];
+
+    const fixture = createFormlyTestComponent();
+    const form = app.form.get('foo') as FormArray;
+
+    expect(form.valid).toEqual(true);
+
+    // add
+    fixture.nativeElement.querySelector('#add').click();
+    fixture.detectChanges();
+
+    expect(form.valid).toEqual(false);
+
+    // remove
+    fixture.nativeElement.querySelector('#remove-1').click();
+    fixture.detectChanges();
+
+    expect(form.valid).toEqual(true);
+  });
+
   it('should share formControl when field key is duplicated', () => {
     app.fields = [
       {