Ngx-color picker在Angular响应式表单中数据绑定值不生效问题

根因分析 #

你同时使用了colorPicker的双向绑定和Angular响应式表单的formControlName绑定，两套绑定逻辑独立运行：colorPicker修改的是你自定义的color变量，不会主动触发响应式表单的控件值更新；你定义的colorChange getter仅在表单初始化时被读取一次，后续color变量变更也不会通知表单重新取值，因此出现不同步问题。

解决方案 #

1. 移除冗余的color变量和colorChange getter，直接通过响应式表单控件管理颜色值
2. 调整colorPicker的绑定逻辑，将选择结果直接同步到表单控件

修改后的TS代码

categoryForm!: FormGroup;
isSubmitted: boolean = false;

constructor(private _fb: FormBuilder, private _categoriesService: CategoriesService, private toastr: ToastrService, private location: Location, private route:ActivatedRoute) { }

ngOnInit(): void {
  this.categoryForm = this._fb.group({
    name: ['', [Validators.required, Validators.minLength(6)]],
    icon: ['', [Validators.required]],
    color: ['', [Validators.required]] // 初始值可根据需求设置默认色
  });
  this._checkEditMode();
}

修改后的HTML颜色选择器部分

<div class="mb-3">
  <label for="exampleInputColor" class="form-label">Category Color</label>
  <input  [colorPicker]="categoryForm.get('color')?.value"
          (colorPickerChange)="categoryForm.get('color')?.setValue($event)"
          [style.background]="categoryForm.get('color')?.value" 
          formControlName="color" 
          type="text" 
          class="form-control" 
          id="color-id">
  {{controls.color.value}}
</div>

调整后colorPicker的选择结果会直接赋值给表单的color控件，表单值和选择器状态即可完全同步。

内容的提问来源于stack exchange，提问作者KingDark