反应形式的数据值的 Ngx 颜色选择器问题

Question

我正在构建一个可以为您的图标选择颜色的表单

一切正常，唯一的问题是颜色选择器不会影响我的反应形式的价值。我尝试了很多东西构建第二个输入字段强制它的值然后使用它，getter 函数，并将它用作表单值。

  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>

Answer 1

这里发生了一些事情，首先 color 和 colorChange() 的 return 值总是相等的，所以没有必要使用 getter 这里：

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

其次，你没有监听 ngx-color-picker 的更改事件，如果你想更新响应式表单，你应该监听。

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

第三，你需要在 colorPickerChange 事件发出时修补表单值：

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

Stackblitz

反应形式的数据值的 Ngx 颜色选择器问题

Ngx-color picker issue with data value in reactive forms

typescript

mean-stack

angular

angular-reactive-forms