質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

1回答

1604閲覧

ES6 AngularJS JSでselectの要素が反映されない

bobo

総合スコア40

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2019/11/30 18:33

こんにちは。

現在、AngularJS2を使ってます。
郵便番号検索から都道府県、市区名、町村名をセットするような画面を作っているのですが。

画面上はうまく値が切り替わっているように見えるのですが、郵便番号検索処理後に「都道府県、市区町村、町域名」の入力欄を操作せずに登録しようとすると、値が取得できていません。
(直接入力すると値がセットされています。)

HTMLSelectElementやHTMLInputElementを使っているせいでこうなっている、或いは画面が正しく表示されていても内部のDOMがRefreshされていないように思うのですが、使い方が間違っているのでしょうか?お聞かせいただければ幸いです。

HTML

1 <tr> 2 <td>郵便番号</td> 3 <td> 4 <input formControlName="zip" type="text" value="" placeholder="1070052" maxlength="7" name="zip" (change)="searchAddress(supplySaveModal, $event.target.value)"> 5 </td> 6 <td>都道府県</td> 7 <td> 8 <select formControlName="prefectureId" name="prefectureId" id="prefectureCtl" (change)="setStations($event.target.value)"> 9 <option value="">都道府県名</option> 10 <option *ngFor="let prefecture of prefectures" [value]="prefecture.id">{{ prefecture.name }}</option> 11 </select> 12 </td> 13 </tr> 14 <tr> 15 <td>市区町村</td> 16 <td><input formControlName="city" id="cityCtl" type="text" value="" placeholder="港区" maxlength="30" name="city"></td> 17 <td>町域名</td> 18 <td><input formControlName="town" id="townCtl" type="text" value="" placeholder="赤坂" maxlength="30" name="town"></td> 19 </tr>

JS

1 searchAddress(modal: NgxSmartModalComponent, post: string) { 2 ... 3 this.addressService.findAll(post).subscribe( 4 (addresses) => { 5 let options = document.querySelectorAll('#prefectureCtl option'); 6 for (var opt, j = 0; opt = options[j]; j++) { 7 if (opt.value == addresses[0].prefecture.id) { 8 (<HTMLSelectElement>document.getElementById("prefectureCtl")).selectedIndex = j; 9 break; 10 } 11 } 12 (<HTMLInputElement>document.getElementById("cityCtl")).value = addresses[0].cityName; 13 (<HTMLInputElement>document.getElementById("townCtl")).value = addresses[0].townName; 14 } 15 ); 16 } 17

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。id属性を消し、これで正しく取得できるようになりました。

JavaScript

1this.form.get('prefectureId').setValue(addresses[0].prefecture.id); 2this.form.get('city').setValue(addresses[0].cityName); 3this.form.get('town').setValue(addresses[0].townName);

投稿2019/11/30 19:47

bobo

総合スコア40

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問