ngx彩色拾取器问题具有反应性形式的数据值

Question

  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>

这里有几件事，首先是color，回返回值总是相等的，因此无需在这里使用getter：

Answer 1

秒，您不会听NGX-Color-picker的更改事件，如果您想更新反应性表单。

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

thrid，当事件排放时，您需要修补表单值：

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

stackblitz

i我像下面的问题一样修复了这个问题

colorPickerChange

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