自動で整形してくれる入力フィールドを作りたい

概要

現在、お問い合わせ番号を自動で整形してくれるような入力フィールドの作成しております。
しかし、なかなかこちらが想定している動作をしてくれず困っています。

詳細・実現したいこと

1.「9-999-999-999」の形式で表示されること。
2.入力途中でカーソル位置をずらし値を挿入及び削除しても、カーソル位置は元の場所に留まり、1の通り表示されていること。

試したこと

1.https://stackoverflow.com/questions/49421414/angular-2-add-hyphen-after-every-4-digit-in-input-card-number-input
→正常に入力ができることを確認。しかし、入力時カーソルを移動させて追加・削除を行うとカーソル位置が最後尾に移動してしまう。

以下ソース

TypeScript
1  // 入力値退避用変数
2  bk_no = "";
3  Inquiry_no;
4  mychange(val) {
5  　//  未入力の場合
6 　　if (val.length == 0) return;
7 　　let chIbn = val.split('-').join("");
8  　// 先頭文字を退避
9 　　let h_no = chIbn.slice(0, 1) + "-";
10 　　// 先頭以降の文字列を退避
11  　let b_no = chIbn.slice(1);
12　　if (b_no.length > 9) {
13 　　　b_no = b_no.slice(0, 9);
14  　}
15  　console.log("先頭文字以外：" + b_no);
16　　if (b_no.length > 0) {
17　　　b_no = b_no.match(new RegExp('.{1,3}', 'g')).join('-');
18  　}
19　　//  入力中のお問い合わせ番号に変更があった場合は結合を回避
20 　if ((val.length < this.bk_no.length && val.length < 13) || this.avoid_flg) {
21 　　this.bk_no = val;
22 　　return;
23 　}
24 　this.Inquiry_no = h_no + b_no;
25  //  現在の入力値を退避
26  this.bk_no = val;
27 }

HTML
1<input matInput type="text" name="din" id="din" (ngModelChange)="mychange($event)" class="form-control" [ngModel]="Inquiry_no" maxlength="13">

2.https://webkikaku.co.jp/blog/htmlcss/form_js_customize/
→npmインストール後を試みるも、new fomatterにてundefinedでエラーが発生し断念。

以下ソース

TypeScript
1this.Inquiry_no = new Formatter.formatter(document.getElementById('din'), {
2  'pattern': '{{9}}-{{999}}-{{999}}-{{999}}',
3  'persistent': true
4}

HTML
1<input matInput type="text" name="din" id="din" pattern="d*" class="form-control" maxlength="13">

3.https://stackblitz.com/angular/plqrqqvmaak?file=app%2Fform-field-custom-control-example.ts
→サンプル通りに実装を試みるも、正常に動作せず断念。

※3はサンプルをほぼそのまま使用しているため、ソース省略。
以下にどういうことを試みたかを記載させて頂きます。
〇サンプルではinputフォームを3分割にしているhtmlを別途用意しているが、その通り実装すると画面が真っ白になり、なにも表示されませんでした。
〇直下のhtml側に直接、inputフォーム3つを書き込んだ場合には動作自体はすることを確認。しかし、入力途中でカーソル位置を移動させようとすると意図しない動作(最後尾にカーソル位置が移動)をすることを確認。