代码之家 › 专栏 › 技术社区 › anon

当用户在Angular 6中键入时更改输入字段文本

angular-material typescript angular

anon · 技术社区 · 6 年前

这是密码

<mat-form-field>
  <input matInput (change)="changedInput()" placeholder="MAC address" name="mac_address" required [(ngModel)]="model.mac_address" (blur)="validate()">
  <mat-error *ngFor="let error of errors_by_field['mac_address']">{{error.message}}</mat-error>
  <span>{{formatedMac}}</span>
</mat-form-field>

changedInput() {
  const blocks = this.model.mac_address.match(/.{1,2}/g);
  this.formatedMac = blocks.shift();
  for (const block of blocks) {
    this.formatedMac = this.formatedMac + ':' + block;
  }
}

1 回复 | 直到 6 年前

Guerric P 6 年前

你曾经 [(ngModel)] ,所以你键入的所有内容 model.mac_address 你对程序的每一次修改 model.mac\u地址 进入你的输入。

那么试试这个:

<mat-form-field>
  <input matInput (change)="changedInput()" placeholder="MAC address" name="mac_address" required [(ngModel)]="model.mac_address" (blur)="validate()">
  <mat-error *ngFor="let error of errors_by_field['mac_address']">{{error.message}}</mat-error>
  <span>{{model.mac_address}}</span>
</mat-form-field>

changedInput() {
  const blocks = this.model.mac_address.match(/.{1,2}/g);
  let formattedMac = blocks.shift();
  for (const block of blocks) {
    formattedMac  = formattedMac  + ':' + block;
  }
  this.model.mac_address = formattedMac;
}

推荐文章

user19531657 · 如何将标题和按钮对齐在同一行?

2 年前

Marcus Edensky · 角度6材质:材质选项卡链接由下划线栏选择

7 年前

Carl.G · 如何将Angular 6 Material sidenav设置为从屏幕右侧从右向左打开

7 年前

spottedmahn · 覆盖只读/禁用样式/CSS

7 年前

bereket gebredingle · 具有列值的物料表数据源筛选器

7 年前

Rahul Munjal · 无法绑定到“dataSource”,因为它不是“table”的已知属性

7 年前

Billy G · “角度材质”对话框:如何在父零部件中更改注入的数据时更新这些数据?

7 年前

Kaushik Nath · 导入MatTabChangeEvent时出错

7 年前

The Fox · “角度材质”对话框:复选框始终返回false

7 年前

Chinaedu Onwukwe · 在鼠标上方展开“材质扩展”面板

7 年前