Usage: how to set it up with reactive forms?

[alberplz]

Usage: how to set it up with reactive forms?

[no-more]

Hi,

I think it would be great to make this works with reactive forms without having to handle the change event and mark the form as dirty manually.

BTW, thanks a lot for this tool.

[hvqthong]

+1

[BrainCrumbz]

Nevermind, it seems we found a way (that requires changes to this library as well). For future readers:

<!-- ... -->
  <form class="container" [formGroup]="myForm">
      <label for="myField">Some label</label>
      <input id="myField" formControlName="myControl" type="text"
                  [colorPicker]="currentColor"
                  (colorPickerChange)="onColorPickerChange($event)">
  </form>
<!-- ... -->

Basically, two-way binding on color picker is split into its two sides:

• one-way binding works by detecting changes on currentColor and communicate updates from model to color picker.
• updates from color picker (strictly speaking, only when color is picked or typed) are sent to model through onColorPickerChange event handler

export class MyComponent implements OnInit {
  myForm: FormGroup;
  myControl: FormControl;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.myForm = this.fb.group({
      myControl: ['', Validators.required],
    });
    this.myControl = this.myForm.controls['myControl'];

    this.myForm.valueChanges.subscribe(/* ... */);
  }

  someSetterMethod(newValue: string) {
    this.myForm.patchValue({
      myControl: newValue,
    });
  }

  get currentColor(): string {
    return (
      this.myForm&&
      this.myForm.controls &&
      this.myForm.controls['myControl'] &&
      this.myForm.controls['myControl'].value ||
      null);
  }

  onColorPickerChange(colorCode: string): void {
    this.myControl.setValue(colorCode);
    this.myControl.markAsDirty();
    this.myControl.markAsTouched();
  }
  // ...
}

When model is updated through someSetterMethod(), form values change, hence control value changes, hence currentColor changes and color picker "sees" the update.

When a color is picked, onColorPickerChange() is invoked, control value is updated accordingly.

In order to avoid change detection exceptions in dev mode, all EventEmitter instances within color picker library had to be created differently:

// from:
//new EventEmitter<SomeType>();

// to
new EventEmitter<SomeType>(true);

This is after a breaking change introduced after RC2 or later, where emitters default sync/async behaviour changed. Now true forces emitter to revert back to previous default behaviour, async.

[Alberplz]

Hi
I should documented that...I've added a new example using the output event
Thanks