how to add an additional property in the object that is assigned to a formControlName

Question

I am getting a response as an array of objects like

taskList = [
{ 'clientTaskId' : '1', 'taskName': 'hardware setup', billableRate: '500'},
{ 'clientTaskId' : '2', 'taskName': 'software installation', billableRate: '250'},
{ 'clientTaskId' : '3', 'taskName': 'environment setup', billableRate: '700'},
{ 'clientTaskId' : '4', 'taskName': 'cafeteria setup', billableRate: '1200'},
];

I am populating this response to an ng-select (multiselect) and then when I select the options, I get the same response format. But I need an additional property 'custom rate' added in the selected object. like

taskList = [
    { 'clientTaskId' : '1', 'taskName': 'hardware setup', billableRate: '500', customRate: ''},
    { 'clientTaskId' : '2', 'taskName': 'software installation', billableRate: '250', customRate: ''},
    { 'clientTaskId' : '3', 'taskName': 'environment setup', billableRate: '700', customRate: ''},
    { 'clientTaskId' : '4', 'taskName': 'cafeteria setup', billableRate: '1200', customRate: ''},
    ];

How can I achieve this, is it possible to achieve this through the concept of assigning a predefined interface to the variable? or by looping and mapping the selected values and appending the customRate property to it.

here is my code :

import {Component, NgModule, ViewChild} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormControl, FormGroup, ReactiveFormsModule, FormsModule, FormBuilder,Validators} from '@angular/forms';
import {NgSelectModule, NgOption} from '@ng-select/ng-select';

@Component({
    selector: 'my-app',
    template: `
        <form (submit)="onClientSave()" [formGroup]="clientForm">
          <ng-select 
                      placeholder="Select custom rates"
                      [items]="taskList"
                      [multiple]="true"
                      bindLabel="taskName"
                      [addTag]="true"
                      [closeOnSelect]="false"
                      clearAllText="Clear"
                      formControlName = "custom"
                      >
                    </ng-select>
        </form>
        <br>
        <pre> {{clientForm.value | json}}</pre>
    `
})
export class AppComponent {

  taskList = [
    { 'clientTaskId' : '1', 'taskName': 'hardware setup', billableRate: '500'},
    { 'clientTaskId' : '2', 'taskName': 'software installation', billableRate: '250'},
    { 'clientTaskId' : '3', 'taskName': 'environment setup', billableRate: '700'},
    { 'clientTaskId' : '4', 'taskName': 'cafeteria setup', billableRate: '1200'},
  ];

   clientForm = this.fb.group({
      custom : [''],
    });

  constructor(
    private fb : FormBuilder
  ){}


}

Here is the stackblitz demo : demo

When do you need to add the property? When it's selected? When you submit the list? Also, if you deselect an item, do you need to remove the property? Can you add the property prior to creating the form? — christo8989, Aug 18 '18 at 20:30
yes, i need to add the property when it is selected. and removed when it is unselected. — Deepak paramesh, Aug 19 '18 at 06:16

score 1 · Answer 1 · answered Aug 18 '18 at 20:38

1

You can append the customRate property to taskList.

this.taskList.map( task => {
           task["customRate"]=0;
        });

answered Aug 18 '18 at 20:38

wFitz

1,266
8
13

thanks for the answer. I have a doubt. why are you assigning 0 to the customRate. i need it as undefined – Deepak paramesh Aug 19 '18 at 10:27
you can assign whatever you like, eg task["customRate"]=null or task["customRate"]='rate' – wFitz Aug 19 '18 at 15:42

christo8989 · Accepted Answer · 2018-08-19T07:51:05.963

Something like the following might work. Subscribe to the (add) and (remove) events. I've never used ng-select before so I'm not exactly sure what data gets sent to the event. Here's the code though.

@Component({
    selector: 'my-app',
    template: `
        <form (submit)="onClientSave()" [formGroup]="clientForm">
          <ng-select 
                      placeholder="Select custom rates"
                      [items]="taskList"
                      [multiple]="true"
                      bindLabel="taskName"
                      [addTag]="true"
                      [closeOnSelect]="false"
                      clearAllText="Clear"
                      (add)="addCustomRate($event)"
                      (remove)="removeCustomRate($event)"
                      formControlName = "custom">
            </ng-select>
        </form>
        <br>
        <pre> {{clientForm.value | json}}</pre>
    `
})
export class AppComponent {

  taskList = [
    { 
      clientTaskId: 1, 
      taskName: 'hardware setup', 
      billableRate: 500 
    },
    { 
      clientTaskId: 2, 
      taskName: 'software installation', 
      billableRate: 250 
    },
  ];
  clientForm = this.fb.group({
    custom : [''],
  });


  constructor(
    private fb : FormBuilder
  ){}


  addCustomRate(item: any): void {
    item.customRate = "";
  }

  removeCustomRate(item: any): void {
    delete item.customRate;
  }

}

thanks for the answer, your idea of iterating and mapping worked. But I just want to know is there any other way to do. like assigning a interface to the "custom". — Deepak paramesh, Aug 19 '18 at 10:28
An interface would not work. You apply interfaces to classes but it doesn’t automatically add those properties to the class. (C# language may eventually have interfaces that add properties but I digress). Currently, interfaces come from TypeScript and therefore are only effective during transpilation. — christo8989, Aug 19 '18 at 16:04

how to add an additional property in the object that is assigned to a formControlName

2 Answers2