我需要在邮政编码的文本框中显示5个字符后的连字符。当输入5个以上字符时，将显示一个连字符（如预期的那样）。但是，当用户手动输入连字符符号时，代码应自动删除手动添加的连字符。这并不像预期的那样奏效。手动添加的连字符不会被删除。当我在browser developer tools中调试typescript代码时，我可以看到属性“zip code”中的多个连字符被删除了，但是这个变化并没有反映在UI中。
下面是typescript文件的代码：
export class AppComponent {
zipCode: string = '';
public setValue(val: any) {
if(val.indexOf('-') >= 0)
val = val.replaceAll('-', '');
if(val.length > 5)
val = val.substr(0,5) + '-' + val.substr(5, val.length - 5);
this.zipCode = val;
}
}
下面是html文件的代码：
<input type="text" name="zipField" [(value)] = "zipCode" (input)="setValue($event.target.value)">
有人能让我知道为什么这个代码不工作。此外，请建议任何替代方法，以实现删除额外的连字符手动添加。提前道谢。
您应该传递元素本身，而不是单独传递输入的值。
这样，您也可以更改input标记中的文本
<input type="text" name="zipField" [(value)] = "zipCode" (input)="setValue($event.target)">
然后在您的typescript文件中
export class AppComponent {
...
public setValue(element: any) {
let val = element.value;
if(val.contains('-'))
val = val.replaceAll('-', '');
if(val.length > 5)
val = val.substr(0,5) + '-' + val.substr(5, val.length - 5);
this.zipCode = val;
element.value = val;
}
}
