CODEWITHSUNDEEP
javascriptangular
Chris
Chris

Reputation: 225

Angular2 reactive forms dropdown

I am just learning angular 2 and have a case where I am creating a form that will be a piece of equipment. One of the fields that are associated with the equipment is a building. When the user is editing or adding a new piece of equipment I want them to be presented with a drop-down with a list of the building they can assign the equipment to. The equipment-detail component is as follows:

  export class EquipmentDetailComponent implements OnInit {
  equipment: IEquipment;
  equipmentForm: FormGroup;
  buildingList: Ibuilding[];

  constructor(private EquipmentService: EquipmentService,
              private BuildingsService: BuildingsService) { }

  ngOnInit() {
    this.equipment = this.EquipmentService.getEquipmentDetail(1);
    this.buildingList = this.BuildingsService.getBuildingList();

    let id = new FormControl(this.equipment.id);
    let unit = new FormControl(this.equipment.unit);
    let active = new FormControl(this.equipment.active);
    let building = new FormControl(this.equipment.building.id);

    this.equipmentForm = new FormGroup({
      id: id,
      unit: unit,
      active: active,
      building: building
    })    
  }

  saveEquipment(formValues){
    console.log(formValues);
  }

  onSelect(id){
    this.equipment.building = this.BuildingsService.getBuildingDetail(id);
    console.log(this.equipment.building)
  }
}

The equipment-detail html is as follows:

<div class="col-md-2">
  <form [formGroup]="equipmentForm" (ngSubmit)="saveEquipment(equipmentForm.value)" autocomplete="off" novalidate>
    <div class="form-group">
      <label form="unit">Unit:</label>
      <input formControlName="unit" id="unit" type="text" class="form-control" placeholder="Unit...."/>
    </div>
    <div class="form-group">
      <label form="active">Active:</label>
      <input formControlName="active" id="active" type="checkbox" class="form-control"/>
    </div>
    <div class="form-group">
      <label form="building">Building:</label>
      <select class="form-control" formControlName="building" (change)="onSelect($event.target.value)">
        <option *ngFor="let building of buildingList" value={{building.id}}>
          {{building.buildingName}}
        </option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
  </form>
</div>

When I click the dropdown option I get an object that represents the building that I selected. The result is 

Object {id: 2, buildingName: "Building 2", active: true}
   active: true
   buildingName: "Building 2"
   id: 2

When I click the save button and look at the data that is associated with the formcontrol the building is no longer an object it is just the buildingId. 

Object {id: 1, unit: "Item 1", active: true, building: "2"}
   active: true
   building: "2"
   id: 1
   unit:"Item 1"
   __proto__: Object

How do I get the main equipment object to be set with the building object and not just the building id?

Upvotes: 3

Views: 4310

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

It is because you had value attribute with building.id, that's why it is assigning building.id on option selection. You should consider changing your value attribute binding to ngValue with whole building object. 

<select class="form-control" formControlName="building" (change)="onSelect($event.target.value)">
  <option *ngFor="let building of buildingList" [ngValue]="building">
    {{building.buildingName}}
  </option>
</select>

Upvotes: 5

Related Questions