Angular value of multiple input field

Question

Page have multiple input field.

<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>

All these field are color picker using ngx-color-picker package. I am trying to get the value of each input field and store in firestore.

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

Problem What is the best solution to use single function for all fields, to get the value of respected field.

TIA

https://angular.io/guide/forms-overview – JB Nizet Mar 28 '19 at 06:55 — JB Nizet, Mar 28 '19 at 06:55

Qellson · Answer 1 · 2019-03-28T09:28:24.547

You dont need any functions, just use Reactive forms like shown below instead of [value] for all inputs respectivly.

<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 file:

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

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

}

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

using Reactive-Forms, but once the value of text field change, it shows null value — faisaljanjua, Mar 28 '19 at 07:05

score -1 · Answer 2 · edited Mar 30 '19 at 08:17

-1

As you asked What is the best solution to use a single function for all fields? so, for that, you can try something like this:

updateFirestoreColor(event: any) {
   var value= (<HTMLInputElement>event.target).value
   this.afs.collection('General').doc('colors').update(value);
}

edited Mar 30 '19 at 08:17

halfer

19,824
17
99
186

answered Mar 28 '19 at 07:06

AddWeb Solution Pvt Ltd

21,025
5
26
57

But it works fine for me as mentioned here https://stackoverflow.com/questions/44321326/property-value-does-not-exist-on-type-eventtarget-in-typescript – AddWeb Solution Pvt Ltd Mar 28 '19 at 07:11

Angular value of multiple input field

2 Answers2