如何在angular2中单击带有掩码的输入字段自动填充

Question

这是用户点击的范围：

<span data-content="15" #Fast15   (click)="enterFastTime(Fast15)" class="quick-time">15mins</span>

这是我的输入字段，用户可以手动输入日期，或者如果他单击上面的跨度，他将使用当前时间。如果用户手动输入时间

，我有将输入数据定义为hh:mm:ss的掩码

<input #time[textMask]="{mask: mask}" (ngModel)="startModel" type="text" placeholder="time" >

这是在用户点击时调用的方法。问题是，当我在我的变量 startModel（即 ngModel）中分配当前时间时，它没有在输入字段中显示数据，我在控制台日志中看到它在正确的格式，当方法结束时，startModel 又是“”，我猜问题来了，因为有一个定义的 textMask。所以问题是，如果用户手动输入它的工作时间，但如果他单击要在输入字段中输入当前时间的跨度，则它不会在输入字段中显示时间，并且数据仅存在于方法的执行中.

public enterFastTime(value) {   
  var date = new Date();    
  var startHours = date.getHours();
  var startMinutes = date.getMinutes();
  var startSeconds = date.getSeconds();
  var autoStart = String(startHours) + ":"+String(startMinutes) +":"+ 
  String(startSeconds);
  this.startModel = autoStart;
  console.log(autoStart);
}

Answer 1

看起来你在 span 中有固定值，那么你可以在模板中做这样的事情。

<span (click)="time.value = 'hh:mm:ss'">fast15</span>
<input #time>

Answer 2

根据您的 post 和评论可以清楚地看出，这里有一个解决方法：

HTML:

Time now 
<input readonly [ngModel]="startModel" type="text" placeholder="time" >
<br>
Time in 15 min<input readonly [ngModel]="startModelPlus15" type="text" placeholder="time" >
<br>
<button (click)="enterFastTime()" class="quick-time">
  Update
</button>

打字稿

  startModel;
  startModelPlus15;

  enterFastTime(value) {   
    let date = new Date();    
    this.startModel = date.toLocaleTimeString()

    date.setTime(date.getTime() + (15 * 60 * 1000));
    this.startModelPlus15 = date.toLocaleTimeString();
  }

DEMO

如何在angular2中单击带有掩码的输入字段自动填充

How to autofill on click an input field with mask in angular2

mask

typescript

angular