通过使用指令模糊和加载表单上的角度数字格式，也不应该格式化 formControl 数据

Posted 2023-02-22

【中文标题】通过使用指令模糊和加载表单上的角度数字格式，也不应该格式化 formControl 数据

【英文标题】：Angular number format on forms on blur and on load by using directive, Also the formControl data should not be formatted

【发布时间】：2019-04-01 11:31:20

【问题描述】：

我正在尝试对表单输入字段进行数字格式化，在加载和模糊时应该格式化数字。专注于该领域，我会将其转换为普通文本。表单组中的值也不应该是格式化的。

App.html

<div>
<form [formGroup]='rForm' (ngSubmit)= "addPost(rForm.value)">
  <div class="form-container" >
    <div class="row columns" >
      <h1>My Reactive form</h1>

      <label>Name
        <input type="text" formControlName="name" appDecimalFormat >
      </label>

      <label>Description
        <textarea formControlName="description"></textarea>
      </label> 

      <label for="validate">Minimum of 3 characters</label>
      <input type="checkbox" name="validate" formControlName="validate" value="1">On

      <input type="submit" class="button expnded" value="Submit Form" [disabled]="!rForm.valid">
    </div>
  </div>
</form>
</div>

<ng-template #forminfo>
  <div class="form-container">
    <div class="row columns">
      <h1>name</h1>

      <p> description </p>
      <input type="button" (click)=""
    </div>
    </div> 
</ng-template>

app.ts

import  Component  from '@angular/core';
import  FormGroup, FormBuilder, Validators  from "@angular/forms";

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  rForm: FormGroup;
  post:any;
  description:any;
  name:any;

  constructor(private fb:FormBuilder)
      this.rForm = fb.group(
        'name':[null, Validators.required],
        'description':[null, Validators.compose([Validators.required,Validators.minLength(3),Validators.maxLength(5)])],
        'validate' :'',
      )
  

  addPost(post)
    this.description = post.description;
    this.name = post.name;
  

数字格式指令.ts

我正在使用这个指令来格式化数字，请帮我解决这个问题。

import  Directive, HostListener, HostBinding, Renderer2, ElementRef  from '@angular/core';
import DecimalPipe from '@angular/common';

@Directive(
  selector: '[appDecimalFormat]'
)
export class DecimalFormatDirective 

  constructor(private decimalPipe: DecimalPipe, private renderer: Renderer2, private el: ElementRef) 

  @HostListener('focus') onFocus($event)
    console.log(event.target.value)
     this.backgroundColor = 'silver';
     this.renderer.setAttribute(this.el.nativeElement,'input', this.decimalPipe.transform(event.target.value));

  
  @HostListener('blur') onBlur($event)
    console.log(event.target.value)
     this.backgroundColor = 'white';
     console.log(this.decimalPipe.transform(event.target.value));
      this.renderer.setAttribute(this.el.nativeElement,'input', this.decimalPipe.transform(event.target.value));
  

  @HostBinding('style.background-color') get setColor()
    return this.backgroundColor;
  
  private backgroundColor = 'white';

【问题讨论】：

有什么问题，目前的行为是什么以及您的期望是什么？

我无法在表单输入字段中呈现格式化数据。我不确定表单组中的数据如何。。输入字段的渲染器使用正确吗？？跨度>

我在使用 this.renderer.setAttribute(this.el.nativeElement,'input', this.decimalPipe.transform(event.target.value)

【参考方案1】：

注入管道不是一件好事。相反，您可以使用从 @angular/common 包中导出的函数。例如，可以使用 use formatNumber。 more

您可以将值设置回输入框，如下所示

this.el.value = formatNumber(num); 

formatNumber() 是从 @angular/common 包中导出的 fn。

【讨论】：

this.el.value 未将值设置回输入字段

从输入和测试中删除 formControlName 指令。

this.el.nativeElement.value，这对我有用，无需删除 formControlName。

请将其设置为解决方案，以便帮助他人?