时间戳

首页 > 解决方案 > 如何在输入上创建固定只读前缀？

angular - 如何在输入上创建固定只读前缀？

问题描述

我有一个名为 user 的输入，如下所示：

<div class="form-group">
<label for="User_Name">{{"UserName" | localize}} *</label>
<input class="form-control" type="text" name="User"
[(ngModel)]="userform.User">
</div>

加载页面时，我想创建一个函数，将用户类型作为前缀放在用户名的输入中，并且该前缀应该是只读的。但是用户应该能够在前缀之后添加用户名。

示例：（Admin 和 Student 是用户类型，应该是只读的并作为参数传递给函数）。然后用户在同一个输入框中添加用户名。

我试图创建一个如下的函数并在ngOnInit()函数中调用它：

addPrefix(userName: string) {
this.userform.user = userName;
}

它确实添加了前缀，只是前缀不是只读的。有人可以帮忙吗？

标签： angulartypescript

解决方案

有多种选项可以实现此功能：

1）您可以创建一个特定于该输入元素的指令，该指令添加前缀并防止其被删除。

2）您可以使用单向绑定而不是双向绑定。[(ngModel)] -> [ngModel] 并添加一个回调方法，如 (ngModelChange)="setName($event)" 其中 setName 检查事件并根据您的条件设置新名称。

3）您可以从这里查看 Angular 表单验证的详细信息：https ://angular.io/guide/form-validation

推荐阅读