I have this situation: I need to add quotes inside an input text field (html) without changing the value of the input. I'm working with angular so I use ngModel, it looks like this

<input ng-model="data" type="text" />

I want the input field to show "whatever is in {{data}}" but the variable data itself remains unchanged (no quotes).

I haven't found any css/Angular tricks yet... any ideas?

I have this situation: I need to add quotes inside an input text field (html) without changing the value of the input. I'm working with angular so I use ngModel, it looks like this

<input ng-model="data" type="text" />

I want the input field to show "whatever is in {{data}}" but the variable data itself remains unchanged (no quotes).

I haven't found any css/Angular tricks yet... any ideas?

• javascript
• html
• css
• angularjs

2 Answers 2

Using ng-model="data" in <input type="text"> binds the data with entire text field. This is not particularly useful in situations where you want only a portion of text(being displayed in text field) to get bind with the scope.

For instance, if you do

<input type="text" value="prefixText {{name}} suffixText" ng-model="name">

The input box will display whatever is in name(with no prefix/suffix text)

However, there's a workaround. Use ng-bind on the variable and mention prefix/suffix text separately in the value="..." attribute.

<input type="text" value="prefixText {{name}} suffixText" ng-bind="name">

Here's the demo

You can try this

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Telephone</mat-label>
    <span matPrefix>+1 &nbsp;</span>
    <input type="tel" matInput placeholder="555-555-1234">
    <mat-icon matSuffix>mode_edit</mat-icon>
  </mat-form-field>
</form>

Demo