ngx-formly · gokhancelik · Feb 10, 2020 · Feb 11, 2020 · Feb 13, 2020 · Feb 14, 2020
diff --git a/demo/src/app/ui/common/select/app.component.ts b/demo/src/app/ui/common/select/app.component.ts
@@ -20,29 +20,30 @@ export class AppComponent {
         description: 'Description',
         required: true,
         options: [
-          { value: 1, label: 'Option 1'  },
-          { value: 2, label: 'Option 2'  },
-          { value: 3, label: 'Option 3'  },
-          { value: 4, label: 'Option 4'  },
+          { value: 1, label: 'Option 1' },
+          { value: 2, label: 'Option 2' },
+          { value: 3, label: 'Option 3' },
+          { value: 4, label: 'Option 4' },
         ],
+        filterable: true,
       },
     },
     {
       key: 'select_multi',
-      type: 'select',
+      type: 'multi-select',
       templateOptions: {
         label: 'Select Multiple',
         placeholder: 'Placeholder',
         description: 'Description',
         required: true,
-        multiple: true,
         selectAllOption: 'Select All',
         options: [
-          { value: 1, label: 'Option 1'  },
-          { value: 2, label: 'Option 2'  },
-          { value: 3, label: 'Option 3'  },
-          { value: 4, label: 'Option 4'  },
+          { value: 1, label: 'Option 1' },
+          { value: 2, label: 'Option 2' },
+          { value: 3, label: 'Option 3' },
+          { value: 4, label: 'Option 4' },
         ],
+        filterable: true,
       },
     },
   ];

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/core/src/lib/templates/field-array.type.spec.ts b/src/core/src/lib/templates/field-array.type.spec.ts
@@ -5,6 +5,7 @@ import { FormGroup, ReactiveFormsModule, FormArray } from '@angular/forms';
 import { FormlyModule, FormlyForm, FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';
 import { FieldArrayType } from './field-array.type';
 import { FormlyFieldText } from '../components/formly.field.spec';
+import { By } from '@angular/platform-browser';
 
 function createFormlyTestComponent() {
   return createGenericTestComponent('<formly-form [form]="form" [fields]="fields" [model]="model" [options]="options"></formly-form>', TestComponent);
@@ -63,6 +64,30 @@ describe('Array Field Type', () => {
     expect(app.form.dirty).toBeTruthy();
   });
 
+  it('should not mark the form dirty on Add/Remove', () => {
+    app.model = { array: null };
+    app.fields = [{
+      key: 'array',
+      type: 'array',
+    }];
+
+    const fixture = createFormlyTestComponent();
+    expect(app.form.dirty).toBeFalsy();
+
+    const arrayType = fixture.debugElement.query(By.css('formly-array-type'))
+      .componentInstance as ArrayTypeComponent;
+
+    arrayType.add(null, null, { markAsDirty: false });
+    fixture.detectChanges();
+    expect(app.form.dirty).toBeFalsy();
+
+    app.form.markAsPristine();
+
+    arrayType.remove(0, { markAsDirty: false });
+    fixture.detectChanges();
+    expect(app.form.dirty).toBeFalsy();
+  });
+
   it('should work with nullable model', () => {
     app.model = { array: null };
     app.fields = [{

diff --git a/src/core/src/lib/templates/field-array.type.ts b/src/core/src/lib/templates/field-array.type.ts
@@ -22,7 +22,7 @@ export abstract class FieldArrayType<F extends FormlyFieldConfig = FormlyFieldCo
   }
 
   onPopulate(field: FormlyFieldConfig) {
-    if (!field.formControl) {
+    if (!field.formControl && field.key) {
       registerControl(field, new FormArray([], { updateOn: field.modelOptions.updateOn }));
     }
 
@@ -42,7 +42,7 @@ export abstract class FieldArrayType<F extends FormlyFieldConfig = FormlyFieldCo
     }
   }
 
-  add(i?: number, initialModel?: any) {
+  add(i?: number, initialModel?: any, { markAsDirty } = { markAsDirty: true }) {
     i = isNullOrUndefined(i) ? this.field.fieldGroup.length : i;
     if (!this.model) {
       assignModelValue(this.field.parent.model, getKeyPath(this.field), []);
@@ -51,16 +51,16 @@ export abstract class FieldArrayType<F extends FormlyFieldConfig = FormlyFieldCo
     this.model.splice(i, 0, initialModel ? clone(initialModel) : undefined);
 
     (<any> this.options)._buildForm(true);
-    this.formControl.markAsDirty();
+    markAsDirty && this.formControl.markAsDirty();
   }
 
-  remove(i: number) {
+  remove(i: number, { markAsDirty } = { markAsDirty: true }) {
     this.model.splice(i, 1);
     unregisterControl(this.field.fieldGroup[i], true);
     this.field.fieldGroup.splice(i, 1);
     this.field.fieldGroup.forEach((f, key) => f.key = `${key}`);
 
     (<any> this.options)._buildForm(true);
-    this.formControl.markAsDirty();
+    markAsDirty && this.formControl.markAsDirty();
   }
 }
diff --git a/src/core/src/lib/templates/field-template.type.ts b/src/core/src/lib/templates/field-template.type.ts
@@ -1,8 +1,27 @@
 import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { FieldType } from './field.type';
 
 @Component({
   selector: 'formly-template',
-  template: `<div [innerHtml]="field.template"></div>`,
+  template: `<div [innerHtml]="template"></div>`,
 })
-export class FormlyTemplateType extends FieldType {}
+export class FormlyTemplateType extends FieldType {
+  get template() {
+    if (this.field && (this.field.template !== this.innerHtml.template)) {
+      this.innerHtml = {
+        template: this.field.template,
+        content: this.to.safeHtml
+          ? this.sanitizer.bypassSecurityTrustHtml(this.field.template)
+          : this.field.template,
+      };
+    }
+
+    return this.innerHtml.content;
+  }
+
+  private innerHtml = { content: null, template: null };
+  constructor(private sanitizer: DomSanitizer) {
+    super();
+  }
+}
diff --git a/src/primeng/src/lib/types/multi-select.ts b/src/primeng/src/lib/types/multi-select.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { FieldType } from '@ngx-formly/core';
+
+@Component({
+  selector: 'formly-field-primeng-multi-select',
+  template: `
+    <p-multiSelect
+      [class.ng-dirty]="showError"
+      [filterPlaceHolder]="to.placeholder"
+      [options]="to.options | formlySelectOptions:field | async"
+      [formControl]="formControl"
+      [formlyAttributes]="field"
+      [filter]="to.filterable"
+      (onChange)="to.change && to.change(field, $event)">
+    </p-multiSelect>
+  `,
+})
+export class FormlyFieldMultiSelect extends FieldType {
+  defaultOptions = {
+    templateOptions: { options: [] },
+  };
+  constructor() {
+    super();
+  }
+}
diff --git a/src/primeng/src/lib/types/select.ts b/src/primeng/src/lib/types/select.ts
@@ -11,6 +11,7 @@ import { FieldType } from '@ngx-formly/core';
       [formControl]="formControl"
       [formlyAttributes]="field"
       [showClear]="!to.required"
+      [filter]="to.filterable"
       (onChange)="to.change && to.change(field, $event)">
     </p-dropdown>
   `,

diff --git a/src/primeng/src/lib/ui-primeng.config.ts b/src/primeng/src/lib/ui-primeng.config.ts
@@ -7,6 +7,7 @@ import {
   FormlyFieldSelect,
 } from './types/types';
 import { FormlyWrapperFormField } from './wrappers/wrappers';
+import { FormlyFieldMultiSelect } from './types/multi-select';
 
 export const FIELD_TYPE_COMPONENTS = [
   // types
@@ -15,6 +16,7 @@ export const FIELD_TYPE_COMPONENTS = [
   FormlyFieldCheckbox,
   FormlyFieldRadio,
   FormlyFieldSelect,
+  FormlyFieldMultiSelect,
 
   // wrappers
   FormlyWrapperFormField,
@@ -47,6 +49,11 @@ export const PRIME_NG_FORMLY_CONFIG: ConfigOption = {
       component: FormlyFieldSelect,
       wrappers: ['form-field'],
     },
+    {
+      name: 'multi-select',
+      component: FormlyFieldMultiSelect,
+      wrappers: ['form-field'],
+    },
   ],
   wrappers: [
     { name: 'form-field', component: FormlyWrapperFormField },

diff --git a/src/primeng/src/lib/ui-primeng.module.ts b/src/primeng/src/lib/ui-primeng.module.ts
@@ -7,6 +7,7 @@ import { InputTextareaModule } from 'primeng/inputtextarea';
 import { CheckboxModule } from 'primeng/checkbox';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { DropdownModule } from 'primeng/dropdown';
+import { MultiSelectModule } from 'primeng/multiselect';
 
 import { FormlyModule } from '@ngx-formly/core';
 import { FormlySelectModule } from '@ngx-formly/core/select';
@@ -22,7 +23,7 @@ import { PRIME_NG_FORMLY_CONFIG, FIELD_TYPE_COMPONENTS } from './ui-primeng.conf
     CheckboxModule,
     RadioButtonModule,
     DropdownModule,
-
+    MultiSelectModule,
     ReactiveFormsModule,
     FormlySelectModule,
     FormlyModule.forChild(PRIME_NG_FORMLY_CONFIG),