我需要在一个文本输入中添加连字符。我附加了一个我需要的图片。我用红色标记了需要修复的内容。第一个连字符应该在三个数字间隔之后，下一个应该在两个间隔之后，依此类推。
当我单击每个数字时，数字会出现，但我希望默认情况下出现破折号。
我试着把它做得有板有眼，但没有成功。

<div class="row">
        <p id="p" style="font-size: 30px;">Introduzca ubicación:<input style="margin-left: 10px; font-size: 30px;"
            type="text" [value]="codeNum" id="code" placeholder="___-__-__-__-__">
          <button type="button" style="margin-left: 10px; font-size: 30px; border: white 3px solid;"
            class="btn btn-dark btn-lg" (click)="clear()">Borrar</button>
          <button type="button" style="margin-left: 10px; font-size: 30px; border: white 3px solid;"
            class="btn btn-dark btn-lg" (click)="allClear()">Borrar todo</button>
        </p>
      </div>
    </div>

    <div class="calculator-keys">
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('0')" value="0">0</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('1')" value="1">1</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('2')" value="2">2</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('3')" value="3">3</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('4')" value="4">4</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('5')" value="5">5</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('6')" value="6">6</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('7')" value="7">7</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('8')" value="8">8</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('9')" value="9">9</button>
    </div>

谢谢