How to update an outputted value on an Angular template driven form page?

Issue

I am trying to extend the Angular template driven form given in the tutorial at angular.io/guide/forms. I have added a select control whose values are based on the following model:

export class Power {
  constructor(
    public val: string,
    public txt: string,
  ) { }
}

When the form is completed, the output is sent to both the console and the page. I can update the values of input fields and they are immediately updated on the page (specifically, to div class="output") and in the console, but the select element does not update. I have a feeling I'm not binding to the right elements, or perhaps my overall model is incorrect. The code is included below. I'd appreciate any input; TIA!

hero-form.component.ts:

import { Component } from '@angular/core';
import { Hero } from '../_models/hero';
import { Power } from '../_models/power'

@Component({
  selector: 'app-hero-form',
  templateUrl: './hero-form.component.html',
  styleUrls: ['./hero-form.component.css']
})

export class HeroFormComponent {
  powers = [
    new Power('Strong', 'Really strong'),
    new Power('Smart', 'Really smart'),
    new Power('Hot','Really hot'),
    new Power('Cold','Really cold'),
    new Power('Weather','Weather changer'),
    new Power('Time','Time traveller'),
  ];

  model = new Hero('', this.powers[0], '');

  submitted: boolean = false;

  onSubmit: Function = () => {
    console.log(this.model);
    this.submitted = true;
  }

  constructor() { }
}

hero-form.component.html:

<h1>Hero Form</h1>
<form #HeroForm="ngForm" (ngSubmit)="onSubmit(HeroForm)">
  <div class="form-group">
    <label for="Name">Name</label>
    <input
      class="form-control"
      type="text"
      name="Name"
      id="Name"
      [(ngModel)]="model.name"
      #name="ngModel"
      required>
      <p *ngIf="name?.touched && name?.errors"
          class="alert alert-danger">
        Name is required!
      </p>
  </div>
  <div class="form-group">
    <label for="Alias">Alias</label>
    <input
      class="form-control"
      type="text"
      name="Alias"
      id="Alias"
      [(ngModel)]="model.alias"
      required
      #alias="ngModel">
      <p *ngIf="alias?.touched && alias?.errors"
          class="alert alert-danger">
        Alias is required!
      </p>
  </div>
  <div class="form-group">
    <label for="power">Hero Power</label>
    <select
      class="form-control"
      id="power"
      name="power"
      required
      [(ngModel)]="model.power"
      #power="ngModel">
      <option
        *ngFor="let pow of powers;"
        [ngValue]="pow.val">
        {{pow.txt}}
      </option>
    </select>
</div>

<button type="submit" [disabled]="!HeroForm.valid">Submit</button>

</form>

<div class="output" *ngIf="model.name && model.alias">

  <p class="name">{{model.name}}</p>
  <p class="alias">{{model.alias}}</p>
  <p class="power">
    <span class="asterisk">***</span>
    {{model.power.val}} <!-- THIS value does not update -->
    <span class="asterisk">***</span>
  </p>

</div>
<p>{{HeroForm.value | json}}</p>

Solution

You need to assign the whole power object as the value of each select option. Otherwise it will just save the val string in the model.power property .

<option
    *ngFor="let pow of powers;"
    [ngValue]="pow"> // <------
    {{pow.txt}}
  </option>

Cheers

Answered By - akotech