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

Question

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>

Answer 1

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