blocks|key|4013471|text|可能有几种方法。一种解决方案是使用将转换后的输入保存到的自定义属性。使用(change)监听输入更改，并在那里进行转换。下面是一个例子：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4013472|在模板中：|4013473|<form+(ngSubmit)="test(value)">
++<input+myCurrencyFormatter+type="text"+[ngModel]="value"+
+++++(change)="storeMyValue($event)"
+++++name="value">
++<button+type="submit">Wtślij</button>
</form>
Custom+value:+{{+myCustomValue+}}|code-block|syntax|javascript|4013474|在组件中：|4013475|myCustomValue:+string;

public+storeMyValue(event)+{
+++//+the+following+replacements+are+not+very+sophisticated,+but+they
+++//+show+the+idea
+++this.myCustomValue+=+event.target.value.trim().replace(/\s%2B/g,+'').replace(",",".");
}|4013476|如果您想要重用它，您可能需要考虑为这种情况编写一个自定义组件。|4013477|entityMap^0|10|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|11|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

<p>There are probably several approaches. One solution is to use a custom property where you save the converted input to. Listen to input changes with <code>(change)</code> and do the conversions there. Find an example below:</p>

<p>In the template:</p>

<pre><code>&lt;form (ngSubmit)="test(value)"&gt;
  &lt;input myCurrencyFormatter type="text" [ngModel]="value" 
     (change)="storeMyValue($event)"
     name="value"&gt;
  &lt;button type="submit"&gt;Wtślij&lt;/button&gt;
&lt;/form&gt;
Custom value: {{ myCustomValue }}
</code></pre>

<p>And in the component:</p>

<pre><code>myCustomValue: string;

public storeMyValue(event) {
   // the following replacements are not very sophisticated, but they
   // show the idea
   this.myCustomValue = event.target.value.trim().replace(/\s+/g, '').replace(",",".");
}
</code></pre>

<p>If you want to re-use this, you might want to consider to write a custom component for that case.</p>


blocks|key|4013535|text|OnFocus删除分隔符并在焦点输出时将其恢复|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4013536|@HostListener('focus')
++onFocus()+{
++++let+element+=+this.el.nativeElement;

++++//+Remove+separator
++++element.value+=+element.value.toString().replace(this.separator,+'');
++}

++@HostListener('focusout')
++onFocusLost()+{
++++let+element+=+this.el.nativeElement;

++++//+Add+separator
++++if+(%2Belement.value+>+999)+{
++++++element.value+=+element.value.replace('/%5E\d%2B/g',+'').replace(/\B(?=(\d{3})%2B(?!\d))/g,+this.separator);
++++}|code-block|syntax|javascript|4013537|}|4013538|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>OnFocus remove separator and restore it on focusout</p>
<pre><code>@HostListener('focus')
  onFocus() {
    let element = this.el.nativeElement;

    // Remove separator
    element.value = element.value.toString().replace(this.separator, '');
  }

  @HostListener('focusout')
  onFocusLost() {
    let element = this.el.nativeElement;

    // Add separator
    if (+element.value &gt; 999) {
      element.value = element.value.replace('/^\d+/g', '').replace(/\B(?=(\d{3})+(?!\d))/g, this.separator);
    }
</code></pre>
<p>}</p>


blocks|key|4013571|text|这可以通过重新定义getter和setter来实现，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4013572|<input+type="text"+[(ngModel)]="displayValue"+>|code-block|syntax|javascript|4013573|在TS端：|4013574|get+displayValue(){+return+this.realValue+%2B+'$'+;+}
set+displayValue(v){+this.realValue+=+v?.replace('$','');+}|4013575|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This can be done by redefining getter and setter like so:</p>
<pre><code>&lt;input type=&quot;text&quot; [(ngModel)]=&quot;displayValue&quot; &gt;
</code></pre>
<p>And in ts side:</p>
<pre><code>get displayValue(){ return this.realValue + '$' ; }
set displayValue(v){ this.realValue = v?.replace('$',''); }
</code></pre>


<p>I have an input field like this: 
<code>&lt;input myCurrencyFormatter type="text" [(ngModel)]="value" name="value"&gt;</code></p>

<p>The input value should be formatted to number such as: 1 024,50(this value should be only visible for input), but value in the ngModel should be stay not formated: 1024.05(dot instead a comma). How I can do it? This is my directive and pipe: <a href="https://stackblitz.com/edit/angular-6smqvf?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-6smqvf?file=src%2Fapp%2Fapp.component.html</a>
I don't know how I can input comma and save to model dot.</p>


How to display different value of input than ngModel

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个这样的输入字段：<input myCurrencyFormatter type="text" [(ngModel)]="value" name="value">输入值应格式化为数字，如:1 024，50(此值应仅对输入可见)，但ngModel中的值应保持非格式:1024.05(点而不是逗号)。我该怎么做呢？这是...

问如何显示与ngModel不同的输入值
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何显示与ngModel不同的输入值EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何显示与ngModel不同的输入值
EN