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

Question

こんにちは。

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

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

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

            <tr>
              <td>郵便番号</td>
              <td>
                <input formControlName="zip" type="text" value="" placeholder="1070052" maxlength="7" name="zip" (change)="searchAddress(supplySaveModal, $event.target.value)">
              </td>
              <td>都道府県</td>
              <td>
                <select formControlName="prefectureId" name="prefectureId" id="prefectureCtl" (change)="setStations($event.target.value)">
                  <option value="">都道府県名</option>
                  <option *ngFor="let prefecture of prefectures" [value]="prefecture.id">{{ prefecture.name }}</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>市区町村</td>
              <td><input formControlName="city" id="cityCtl" type="text" value="" placeholder="港区" maxlength="30" name="city"></td>
              <td>町域名</td>
              <td><input formControlName="town" id="townCtl" type="text" value="" placeholder="赤坂" maxlength="30" name="town"></td>
            </tr>

  searchAddress(modal: NgxSmartModalComponent, post: string) {
    ...
    this.addressService.findAll(post).subscribe(
      (addresses) => {
        let options = document.querySelectorAll('#prefectureCtl option');
        for (var opt, j = 0; opt = options[j]; j++) {
          if (opt.value == addresses[0].prefecture.id) {
            (<HTMLSelectElement>document.getElementById("prefectureCtl")).selectedIndex = j;
            break;
          }
        }
        (<HTMLInputElement>document.getElementById("cityCtl")).value = addresses[0].cityName;
        (<HTMLInputElement>document.getElementById("townCtl")).value = addresses[0].townName;
      }
    );
  }

Answer 1

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

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