Angular 使用指令模糊和加载时表单上的数字格式，此外，不应格式化 formControl 数据

Question

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

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;
  }

}

数字格式-directive.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';


}

Answer 1

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

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

this.el.value = formatNumber(num);

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

Angular 使用指令模糊和加载时表单上的数字格式，此外，不应格式化 formControl 数据

Angular number format on forms on blur and on load by using directive, Also the formControl data should not be formatted

angular

angular6

angular-directive

angular-pipe