angulartypescriptmean-stackangular-reactive-forms

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>

enter image description here

Solution

  • There are a few things going on here, first color and the return value of colorChange() are always going to be equal, so there's no need to use a getter here:

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

    Second, you aren't listening the change event of ngx-color-picker, which you should if you want to update the reactive form.

            <input
          [(colorPicker)]="color"
          [style.background]="color"
          (colorPickerChange)="onChangeColor($event)"
          type="text"
          class="form-control"
          id="color-id"
        />

    Thrid, you need to patch the form value when the colorPickerChange event emits:

      public onChangeColor(color: string): void {
    this.color = color;
    this.categoryForm.patchValue({ color });
  }

    Stackblitz