как инициализировать сторону @angular-material-components/color-picker .ts со строкой (fomat hex)

Question

Я пытаюсь преобразовать шестнадцатеричную строку в цвет (импорт @angular-material-components/color-picker) или создать экземпляр цвета и установить мое значение шестнадцатеричного запаса в моей базе данных со стороны.ts

<!-- begin snippet: js hide: false console: true babel: false -->

mat-form-field>
                              <input matInput [ngxMatColorPicker]="picker" formControlName="color" [style.background-color]="getfCAll(ri)"  [disabled]="disabled">
                              <ngx-mat-color-toggle matSuffix [for]="picker"></ngx-mat-color-toggle>
                              <ngx-mat-color-picker #picker [touchUi]="touchUi" [color]="color"></ngx-mat-color-picker>
                            </mat-form-field>

createPriority(p): FormGroup {
    return this.formBuilder.group({
      name: [p.name, Validators.compose([Validators.required])],
      color: [p.color, Validators.compose([Validators.required])]
    });
  }

core.js:4081 ERROR TypeError: c.toHexString is not a function
    at NgxMatColorCollectionComponent.set color [as color] (angular-material-components-color-picker.js:810)
    at setInputsForProperty (core.js:8657)
    at elementPropertyInternal (core.js:7703)
    at Module.ɵɵproperty (core.js:13791)
    at NgxMatColorPaletteComponent_Template (angular-material-components-color-picker.js:421)
    at executeTemplate (core.js:7329)
    at refreshView (core.js:7198)
    at refreshComponent (core.js:8335)
    at refreshChildComponents (core.js:6991)
    at refreshView (core.js:7248)

и у меня есть белое всплывающее окно, введите описание изображения здесь

Answer 1

Во-первых, вам нужно преобразовать свой цвет в RGB, вы можете использовать этот метод:

hexToRgb(hex) {
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, (m, r, g, b) => {
    return r + r + g + g + b + b;
  });
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}    

тогда вам нужно получить экземпляр NgxMatColorPickerInput

import { NgxMatColorPickerInput, Color } from '@angular-material-components/color-picker';

...

@ViewChild(NgxMatColorPickerInput) pickerInput: NgxMatColorPickerInput;

теперь вы можете легко установить значение, как это

ngAfterViewInit(): void {
  const temp = this.hexToRgb('#00ff00');
  this.pickerInput.value = new Color(temp.r, temp.g, temp.b);
}

Answer 2

Хорошо спасибо

createPriority(p): FormGroup {
    let rgb = this.hexToRgb(p.color)
    return this.formBuilder.group({
      name: [p.name, Validators.compose([Validators.required,Validators.maxLength(25)])],
      color: [new Color(rgb.r,rgb.g,rgb.b,1), Validators.compose([Validators.required])]
    });
  }
  
  hexToRgb(hex) {
    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, (m, r, g, b) => {
      return r + r + g + g + b + b;
    });
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }