i want to use mat-select`s value as key and input field`s value as the value of that key in angular reactive form

Question

Here is my UI

https://i.stack.imgur.com/NlBNA.png

I want my form value like this {color :"red"} where **mat-selects value is color** and **input field is red**. When I will change mat-selects value the key that means color will be changed too.

Let say if I change mat-select`s value from the color to storage then.

My OutPut should be {storage:"red"}

Let say if I change the input field`s value from the red to "250Gb" then.

My OutPut should be {storage:"250Gb"}

how to solve this problem best way possible.Thanks for your help

MY HTML:

<form [formGroup]="itemEntryForm" (submit)="onSaveitem()">
  <div> 
                <mat-form-field appearance="outline" class="full-width-input">  
                    <mat-label >Attribute  :</mat-label>
                    <mat-select>
                    <mat-option  *ngFor="let attribute of attributes" [value]="attribute.name">{{ attribute.name }}</mat-option>
                    
                </mat-select>
               
                  <mat-label><mat-icon>branding_watermark</mat-icon> <b>*Attribute </b> <i> label</i></mat-label>
          
                </mat-form-field>  
              </div>
              <div> 
                <mat-form-field class="full-width-input">
                <mat-label >Attribute Value :</mat-label>
                <input matInput name="item_attribute" placeholder="Color ,Storage" formControlName="item_attribute">
                <mat-error *ngIf="itemEntryForm.get('item_attribute').invalid">Attribute</mat-error>
                </mat-form-field>
            </div>
            <div> 
</form>

MY Ts File:

export class ItemEntryComponent implements OnInit {
  itemEntryForm:FormGroup;


  taxes = [{name:"tax"},{name:"tax2"}]
 
  constructor(private _formbuilder:FormBuilder) { }

  ngOnInit(): void {
    this.itemEntryForm=this._formbuilder.group({
      type           :     ['Goods'], 
      item_name      :     ['',Validators.required],
      description    :     ['',Validators.required],
      unit           :     ['pc',Validators.required],
      tax            :     ['',],
      manufacturer   :     ["",],   
      brand          :     ['',],
      item_attribute :     ['',],
      item_attribute2:     ['',],
    
      image          :     ['',],

    })
  }

  
  onSaveitem(){
    console.log( this.itemEntryForm.value)
  }

  
}

Hello Rakin, check this solution here https://stackoverflow.com/a/48705695/7812329. Let me know if you still have doubt. — Chintan Joshi, Jun 02 '21 at 10:44
this solution showing the selected value of the dropdown.In my case, I have 2 fields one is dropdown and another input field if dropdown value selected as let say X and input field value is Y, then form value will be {x: "y"} — Rakin, Jun 02 '21 at 10:52
If it is just that, you can prepare such format on value change of the form. By taking value of both the form-controls to make json using dynamic-key. let me know if you are not aware of dynamic-key json. — Chintan Joshi, Jun 02 '21 at 10:58
@Chintan Joshi i am aware of dynamic-key json.is there anyway to do that in a reactive form way. — Rakin, Jun 02 '21 at 11:10
this.itemEntryForm.value will return only those controls which are part of the form. To receive what you want from that form, you can add controls on change of the value of X control & set its value when Y control changes. — Chintan Joshi, Jun 02 '21 at 11:13
Let me post TS code for what I have suggested. I'll try to make it more understandable. — Chintan Joshi, Jun 02 '21 at 11:36

score 0 · Accepted Answer · answered Jun 02 '21 at 11:41

Trying to set subscription of dropdown to get value of it. Which can be used as key of the form control.

setFormSubscription() {
   this.itemEntryForm.controls.X.valueChanges.subscribe(new_X_Value => {
      if (new_X_)Value && new_X_)Value.value) {
        // new_X_)Value.value is because of considering it as dropdown.
        if (!this.itemEntryForm.get(new_X_)Value.value)) { // if it's not already added.
          this.itemEntryForm.addControl(new_X_)Value.value, new FormControl(''))
        }
     }
  })

  this.itemEntryForm.controls.Y.valueChanges.subscribe(new_Y_Value => {
    if (this.itemEntryForm.get(NAME_OF_X_CONTROL)) {
      this.itemEntryForm.get(NAME_OF_X_CONTROL).setValue(new_Y_Value);
      // Here you need to make sure X Control exists
      // To get Name of X Control, you can use list which is used for dropdown. 
    }
  })
}

Call setFormSubscription function just after form-creation.

After changing value check, call onSaveitem function to check value.

i want to use mat-select`s value as key and input field`s value as the value of that key in angular reactive form

1 Answers1