Угловой числовой формат в формах при размытии и при загрузке с использованием директивы. Также данные formControl не должны форматироваться - PullRequest
Новая
       20

Угловой числовой формат в формах при размытии и при загрузке с использованием директивы. Также данные formControl не должны форматироваться

0 голосов
/ 28 октября 2018

Я пытаюсь отформатировать поле ввода формы, где число должно быть отформатировано при загрузке и размытии.в фокусе на поле я преобразую его в обычный текст.также значение в форме группы не должно быть в формате.

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

}

number-format-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';


}

1 Ответ

0 голосов
/ 28 октября 2018

Инъекционная труба не очень хорошая вещь.Вместо этого вы можете использовать функции, экспортированные из пакета @ angular / common.Например, используйте formatNumber. more

Вы можете установить значение обратно в поле ввода следующим образом 

this.el.value = formatNumber(num);

formatNumber () - это fn, экспортированный из @ angular / common package.

...