Ngx-color picker issue with data value in reactive forms

I'm building a form that has the option of choosing a color for your icon

everything works fine the only problem is that the color-picker doesn't affect the value of my reactive form. I tried many things building a second input field force the value of it then use it, getter function, and use it as the form value.


color!: string;
get colorChange() {
let newColor:string;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
return newColor = this.color
}

categoryForm!: FormGroup;
// eslint-disable-next-line @typescript-eslint/no-inferrable-types
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: [this.colorChange, [Validators.required]]
});
this._checkEditMode();
}

<div class="category">
<h1 class="h1"> {{title}}</h1>
<div class="card">

<form class="my-3 mx-3" [formGroup]="categoryForm" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="exampleInputName" class="form-label">Category Name</label>
<input formControlName="name" type="text" class="form-control" id="category-id" aria-describedby="emailHelp">
<div *ngIf="controls.name.invalid && isSubmitted" class="alert alert-danger" role="alert">
Name is required and must be at least 6 characters long.
</div>
</div>
<div class="mb-3">
<label for="exampleInputIcon" class="form-label">Category Icon</label>
<input formControlName="icon" type="text" class="form-control" id="icon-id">
<div *ngIf="controls.icon.invalid && isSubmitted" class="alert alert-danger" role="alert">
icon is required.
</div>
</div>
<div class="mb-3">
<label for="exampleInputColor" class="form-label">Category Color</label>
<input [(colorPicker)]="color" [style.background]="color" formControlName="color" type="text" class="form-control" id="color-id">
{{controls.color.value}} {{color}} {{colorChange}}
</div>
<button type="submit" class="btn btn-primary">{{btn}}</button>
<a (click)="editCancel()" class="btn btn-warning" role="button">Cancel</a>
</form>
</div>
</div>



Continue reading...