时间戳

首页 > 解决方案 > Ngx 颜色选择器问题与反应形式的数据值

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

问题描述

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

一切正常，唯一的问题是颜色选择器不会影响我的反应形式的值。我尝试了很多方法来构建第二个输入字段，强制它的值然后使用它，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>

在此处输入图像描述

标签： angulartypescriptmean-stackangular-reactive-forms

解决方案

这里发生了一些事情，首先color，返回值colorChange()总是相等的，所以这里不需要使用 getter：

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

其次，您没有听到 ngx-color-picker 的 change 事件，如果您想更新响应式表单，您应该这样做。

        <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 });
  }

堆栈闪电战

推荐阅读