Question

页面具有多个输入字段。

<div class="form-group w-100">
        <label class="col-md-3 text-left" for="">Box 2</label>
    <input
      class="form-control ml-2 mr-2"
      [value]="MenuBox2"
      [style.background]="MenuBox2"
      [(colorPicker)]="MenuBox2"
      (colorPickerChange)="updateFirestoreColor($event)"
    />
  </div>
  <div class="form-group w-100">
    <label class="col-md-3 text-left" for="">Box 2 Text</label>

      class="form-control ml-2 mr-2"
      [value]="MenuBox2Text"
      [style.background]="MenuBox2Text"
      [(colorPicker)]="MenuBox2Text"
      (colorPickerChange)="updateFirestoreColor($event)"
    />
  </div>
  <div class="form-group w-100">
    <label class="col-md-3 text-left" for="">Box 2 Hover Text</label>
    <input
      class="form-control ml-2 mr-2"
      [value]="MenuBox2Hover"
      [style.background]="MenuBox2Hover"
      [(colorPicker)]="MenuBox2Hover"
      (colorPickerChange)="updateFirestoreColor($event)"
    />
  </div>

所有这些字段都是使用ngx-color-picker软件包的颜色选择器。我试图获取每个输入字段的值并存储在firestore中。

updateFirestoreColor(event: any) {
   this.afs.collection('General').doc('colors').update(event);
}

问题为所有字段使用单一功能以获得受尊重字段的值的最佳解决方案是什么。

TIA

Answer 1

您不需要任何功能，只需对下面的所有输入分别使用如下所示的反应形式，而不要使用[value]。

<div [formGroup]="form" class="form-group w-100" (ngSubmit)="onSubmit()">
        <label class="col-md-3 text-left" for="">Box 2</label>
    <input
      class="form-control ml-2 mr-2"
      formControlName="MenuBox2"
      [style.background]="MenuBox2"
      [(colorPicker)]="MenuBox2"
      (colorPickerChange)="updateFirestoreColor($event)"
    />
  </div>
  <div class="form-group w-100">
    <label class="col-md-3 text-left" for="">Box 2 Text</label>

      class="form-control ml-2 mr-2"
      formControlName="MenuBox2Text"
      [style.background]="MenuBox2Text"
      [(colorPicker)]="MenuBox2Text"
      (colorPickerChange)="updateFirestoreColor($event)"
    />
  </div>
  <div class="form-group w-100">
    <label class="col-md-3 text-left" for="">Box 2 Hover Text</label>
    <input
      class="form-control ml-2 mr-2"
      formControlName ="MenuBox2Hover"
      [style.background]="MenuBox2Hover"
      [(colorPicker)]="MenuBox2Hover"
      (colorPickerChange)="updateFirestoreColor($event)"
    />
  </div>

TS文件：

form:FormGroup;
constructor(private fb: FormBuilder){}

ngOnInit(){
 this.form = this.fb.group({
   MenuBox2:'',
   MenuBox2Text:'',
   MenuBox2Hover:'',
 })

}

onSubmit(){
  console.log(this.form.value)//Firebase call
}

Answer 2

您曾问过对所有字段使用单个功能的最佳解决方案是什么？ 因此，您可以尝试执行以下操作：

getCouponAndNotifyAsync()

多个输入字段的角值

2 个答案: