How can I populate input of type text value based on dropdown selection - Angular 5

Question

I'm fetching products from database, they are populating my dropdown.

I have ability to choose a product from dropdown, that product contains unit of measure (liter, kilo, oz etc). So basically when I choose a product from a dropdown I would like to display unit of measure in control below dropdown, like in example above.

Here is my html:

<div class="form-horizontal" action="">

    <div class="form-group">
        <label class="control-label dash-control-label col-sm-3">Title:</label>
        <div class="col-sm-6">
            <select class="form-control dash-form-control select2" style="width: 100%;">
                <option selected disabled>Search...</option>
                <option *ngFor="let ingredient of ingredients;" [value]="ingredient.id">{{ingredient.title}}</option>
            </select>
        </div>

        <div class="col-sm-3">
            <button type="button"
                    class="btn main-content-button mini-add-button"
                    data-toggle="modal"
                    data-target="#modal-3">
                <i class="fas fa-plus"></i>
            </button>
        </div>

    </div>

    <!--Unit of measure-->
    <div class="form-group">
        <label class="control-label dash-control-label col-sm-3" for="user-lastname">Unit of measure:</label>
        <div class="col-sm-4">
            <input type="text" class="form-control dash-form-control read-only" placeholder="" value="Liter (L)" readonly>
        </div>
    </div>

    <!--Quantity-->
    <div class="form-group">
        <label class="control-label dash-control-label col-sm-3" for="user-password">Quantity:</label>
        <div class="col-sm-4">
            <input type="text" class="form-control dash-form-control" id="user-password" placeholder="">
        </div>
    </div>

</div><!--End of form horizontal-->

So basically in my input which holds Unit of measure I would like to get unit of measure of selected product and display it there, it's just read only field :)

And here is my typescript code where I'm getting product from DB:

export class ProductIngredientNewComponent implements OnInit {

  @Input() ProductId: string;

  // Array that will holds all Products which represent ingredients
  ingredients: Product[];

  id: string;
  constructor(public _productsService: ProductService) {

  }

  ngOnInit() {
    // Here I'm getting values from DB and this values are source to dropdown
    this._productsService.getAll().subscribe(ing => this.ingredients = ing);
  }

}

Do I need to attach event when value in dropdown is selected, to manually set value to some property in typescript and display it in unit of measure, of there is some another more nice and more angular way?

Thanks guys Cheers

Answer 1

Can you try using the following code and check if your problem is solved. I had the same situation just I had radio buttons in my case. Idea is save your object in value of Option. and assign a model to it which will contain the selected value from select box and bind the same ngmodel to your input.

Hoping it to work for you!

<div class="col-sm-6">
            <select class="form-control dash-form-control select2" style="width: 100%;" [(ngModel)]="ingredient.title">
                <option selected disabled>Search...</option>
                <option *ngFor="let ingredient of ingredients;" [value]="ingredient">{{ingredient.title}}</option>
            </select>
        </div>

<input type="text" class="form-control dash-form-control read-only" placeholder="" value="Liter (L)" readonly  [(ngModel)]="ingredient.title">

Answer 2

With Angular you have the possibility to use the two-way data binding for the selected dropdown item. First declare a property which holds the selected item in the component:

export class ProductIngredientNewComponent implements OnInit {
    selectedIngredient: Product;
    /* */
}

Then add the ngModel directive to your dropdown and also change the value to be the ingredient itself, instead of ingredient.id :

<select [(ngModel)]="selectedIngredient">
    <option selected disabled>Search...</option>
    <option *ngFor="let ingredient of ingredients;" [value]="ingredient"> 
        {{ingredient.title}}
    </option>
</select>

Then you can easily display the unit in the input field. I also added a check to avoid errors, when the selectedIngredient is not set.

<input type="text" placeholder="Unit" [value]="selectedIngredient && selectedIngredient.unitOfMeasure" readonly>