プルダウンメニューから値を取得する事ができない

Question

すみません。教えてください。
angularにてユーザーフォームを作成しています。

フォーム項目の"年齢"を選択した後、submit先のshow()関数にて結果を受け取りコンソール出力しているのですが
もっと簡単にソースを実装したいと考えています。

現在は以下のコードで実装しています。

■ app.component.ts

...(省略)
  // 変数宣言：プルダウンメニュー表示用
  ages: Number[] = [
    21,
    22,
    23,
  ];

  // 変数宣言：コンソール結果用
  age: Number;

  // 関数：コンソール表示用
  show() {
    console.log(this.age);
  }
...(省略)

■ app.component.html

<form #myForm="ngForm" (ngSubmit)="show()">
　年齢：
　<select name="age" [(ngModel)]="age" required>
　　<option disabled="disabled" [value]="undefined">選択</option>
  　<option *ngFor="let item of ages" [value]="item" [disabled]="item.disabled" [selected]="item.value === age">{{item}}</option>
　</select><br>
　<input type="submit" value="送信" [disabled]="myForm.invalid">
</form>

■ app.component.css

select{
    padding:10px;
    font-size:1em;
    color:#aaa;
    border:solid 1px #ccc;
    margin:0 0 10px;
    border-radius: 5px;
}
.age {
    width:100px;
}

■ 実行結果

教えて頂きたいのは、この処理を以下のようなコードで実装したいと考えています。

■ app.component.ts

...(省略)
  // 変数宣言：プルダウンメニュー表示用
  ages: Number[] = [
    21,
    22,
    23,
  ];
  // 関数：コンソール表示用
  show(i: Number) {
    console.log(this.age[i]);
  }
...(省略)

受け取りのためだけに新たにage変数を利用せずに、既存の配列変数から要素を取り出したいんですが
どうにもshow()関数に配列数のiを引き渡すことが出来ずに何時間も手づまり状態です…。
試したことは、*ngForディレクティブに"index as i"を指定したんですが
そこから先、そのiをshow()関数に渡せず...。

どのようにすればshow()関数にiを引き渡す事が出来るでしょうか？
申し訳ありませんが、どなたかご教示頂ければ幸いです。

Answer 1

もっとシンプルな方法があるかもしれませんしコードの量は減らないかもしれませんが、公式ドキュメントを参考にFormBuilderを使用するかFormControlを使用するのが王道かと思います。

参考
https://angular.jp/start/forms

https://angular.jp/guide/forms-overview

追記：
雑な解答をしてしまい申し訳なかったので実装してみました。

https://stackblitz.com/edit/angular-fz9ymg?file=app%2Fform-field-overview-example.ts

export class FormFieldOverviewExample {

myGroup = new FormGroup({
age: new FormControl()
});
  // 変数宣言：プルダウンメニュー表示用
  ages: Number[] = [
    21,
    22,
    23,
  ];
  // 関数：コンソール表示用
  show(i) {
    console.log(i);
  }
}

	<form [formGroup]="myGroup" (ngSubmit)="show(myGroup.value.age)">
		<mat-form-field>
			<mat-select [formControlName]="'age'">
				<mat-option *ngFor="let item of ages" value="{{item}}">{{item}}</mat-option>
			</mat-select>
		</mat-form-field>
    <input type="submit" value="送信">
	</form>

Comments

[inukujira]

回答ありがとうございます。
残念ながら本件の解決につながる内容を見つける事ができませんでした…。

[s14pes]

追記いたしました。

[inukujira]

s14pesさん、わざわざ実装して頂きありがとうございました。
ただ私の環境ではうまく動かず、おそらく読み込みモジュール関連かと思いますが環境が足りないようです。

なるべく簡単な実装を思い描いてたんですがなかなか難しいようですね…。

[inukujira]

s14pesさん、ありがとうございます。
回答を元に１つずつ整理して実装する事が出来ました！

FormControlめちゃくちゃ便利ですね！
感謝です！ありがとうございました！