Как создать фиксированный префикс только для чтения при вводе?

Question

У меня есть вход с именем 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 - это типы пользователей, которые должны быть доступны только для чтения и переданы в качестве параметра функции). Затем пользователь добавляет имя пользователя в то же поле ввода.

• Admin_John
• Admin_Tom
• Student_Jerry

Я пытался создать функцию, как показано ниже, и вызовите ее в функции ngOnInit():

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

Она добавляет префикс, за исключением того, что префикс не доступен только для чтения. Кто-нибудь может помочь с этим, пожалуйста?

Answer 1

Есть несколько вариантов для достижения этой функциональности:

1) Вы можете создать директиву, указывающую c для этого элемента ввода, которая добавляет префикс и предотвращает его удаление.

2) Вы можете использовать одностороннюю привязку вместо двусторонней привязки. [(ngModel)] -> [ngModel] А также добавьте метод обратного вызова, например (ngModelChange) = "setName ($ event)", где setName проверяет событие и устанавливает новое имя в соответствии с вашим условием.

3) Подробнее о проверке формы Angular можно узнать здесь: https://angular.io/guide/form-validation