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又是＆＃34;＆＃34;，我想问题来了，因为有一个已定义的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

从您的帖子和评论中可以清楚地看到，这是一个修复：

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

如何使用mask2中的掩码单击输入字段进行自动填充

2 个答案: