Angular中如何通过输入十六进制代码联动PrimeNG p-colorPicker

你现在的问题是输入框修改十六进制值时无法同步到p-colorPicker，核心原因是输入框只做了单向值绑定，没有监听输入事件去更新响应式表单的color控件值。下面是具体的修复方案：

步骤1：修改模板，给输入框添加输入监听 #

保留输入框的[value]绑定，同时添加(input)事件监听，用于同步输入内容到表单控件：

<p-colorPicker #picker
    id="color"
    name="color"
    formControlName="color"
    format="hex"
    (onChange)="trocarHex()">
</p-colorPicker>
<div class="input-group w-25 mx-2">
    <div class="input-group-prepend">
        <span class="input-group-text" id="hexcode">#</span>
    </div>
    <input #hex
        [value]="hexcode"
        class="form-control"
        placeholder="hexcode"
        aria-label="hexcode"
        aria-describedby="hexcode"
        maxlength="6"
        (input)="updateColorFromHex($event.target.value)" />
</div>

步骤2：组件类添加同步方法 #

在组件中实现updateColorFromHex方法，将输入的6位十六进制字符串加上#前缀后，更新到响应式表单的color控件中：

hexcode: string;

trocarHex(): void {
  // 颜色选择器变化时，去掉#前缀同步到输入框
  this.hexcode = this.editForm.get('color')!.value.slice(1);
}

updateColorFromHex(inputValue: string): void {
  // 过滤非十六进制字符（增强鲁棒性）
  const validHex = inputValue.replace(/[^a-fA-F0-9]/g, '');
  if (validHex.length === 6) {
    // 加上#前缀，更新表单控件
    this.editForm.get('color')!.patchValue(`#${validHex}`);
  }
}

额外优化：支持短十六进制格式（可选） #

如果希望用户输入3位十六进制值时也能同步到颜色选择器，可以修改updateColorFromHex方法，自动扩展为6位格式：

updateColorFromHex(inputValue: string): void {
  const validHex = inputValue.replace(/[^a-fA-F0-9]/g, '');
  let colorValue = '';
  if (validHex.length === 3) {
    // 扩展3位十六进制为6位（如#ABC → #AABBCC）
    colorValue = `#${validHex.split('').map(c => c + c).join('')}`;
  } else if (validHex.length === 6) {
    colorValue = `#${validHex}`;
  }
  if (colorValue) {
    this.editForm.get('color')!.patchValue(colorValue);
  }
}

关于之前双向绑定失败的原因 #

p-colorPicker绑定的表单字段值是带#前缀的完整十六进制字符串（比如#FFFFFF），而你的输入框是不带#的6位字符，直接绑定同一字段会因格式不匹配导致同步失效，所以必须通过方法做格式转换后再同步。

内容的提问来源于stack exchange，提问作者Anderson Benício