fix(module:color-picker): avoid emitted twice nzOnChange event (#8530)

Author: Nicoss54

components/color-picker/color-format.component.ts

@@ -24,15 +24,15 @@ import {
   ValidatorFn
 } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { debounceTime, filter, takeUntil } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';
 
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { NzInputDirective, NzInputGroupComponent } from 'ng-zorro-antd/input';
 import { NzInputNumberComponent } from 'ng-zorro-antd/input-number';
 import { NzSelectModule } from 'ng-zorro-antd/select';
 
 import { generateColor } from './src/util/util';
-import { NzColorPickerFormatType } from './typings';
+import { NzColorPickerFormatType, ValidFormKey } from './typings';
 
 @Component({
   selector: 'nz-color-format',
@@ -183,6 +183,9 @@ export class NzColorFormatComponent implements OnChanges, OnInit, OnDestroy {
       .pipe(
         filter(() => this.validateForm.valid),
         debounceTime(200),
+        distinctUntilChanged((prev, current) =>
+          Object.keys(prev).every(key => prev[key as ValidFormKey] === current[key as ValidFormKey])
+        ),
         takeUntil(this.destroy$)
       )
       .subscribe(value => {

components/color-picker/typings.ts

@@ -9,4 +9,18 @@ export type NzColorPickerFormatType = 'rgb' | 'hex' | 'hsb';
 
 export type NzColorPickerTriggerType = 'click' | 'hover';
 
+export interface ValidForm {
+  isFormat: NzColorPickerFormatType | null;
+  hex: string | null;
+  hsbH: number;
+  hsbS: number;
+  hsbB: number;
+  rgbR: number;
+  rgbG: number;
+  rgbB: number;
+  roundA: number;
+}
+
+export type ValidFormKey = keyof ValidForm;
+
 export interface NzColor extends Color {}