Угловой 2 - маска ввода: поле ввода отображает форматированное значение, в то время как модель сохраняет неформатированное значение

Я пытаюсь иметь формат поля ввода / значения маски по мере их ввода, в то время как фактическая модель сохраняет необработанное (или иначе отформатированное) значение. Я думаю о телефонных номерах и т. Д., Но для простоты я использую прописные буквы для тестирования.

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

plunk: http://plnkr.co/edit/VH5zn4S8q28CBpFutBlx?p=preview

Вот директива:

@Directive({
  selector: '[uppercase]',
  host: {
    '(input)': 'onInputChange()',
  }
})

export class UppercaseDirective {

  constructor(private model: NgFormControl) { }

  onInputChange() {
    let newValue = this.model.value.toUpperCase();
    this.model.viewToModelUpdate(newValue);
    this.model.valueAccessor.writeValue(newValue);
  }

}

и форма:

<form [ngFormModel]='myForm'>
  <input [ngFormControl]='myForm.controls.field' uppercase>
  <div>
    {{ myForm.value.field }}
  </div>
</form>

angular angular2-forms angular2-directives
person Steve    schedule 08.06.2016    source источник
comment
почему не трубы? Похоже, вам просто нужен другой способ отображения текста.   -  person Ed Morales    schedule 08.06.2016
comment
Я хочу, чтобы форматирование происходило в поле ввода - маска ввода. Я показываю значение в представлении только в целях тестирования.   -  person Steve    schedule 08.06.2016

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте обновить ссылку на элемент управления прямо следующим образом:

onInputChange() {
  let newValue = this.model.value.toUpperCase();
  this.model.control.updateValue(newValue);
}

См. Также плункер http://plnkr.co/edit/XYPWYgA8lbg2EdxPqzWj?p=preview.

person yurzui    schedule 08.06.2016
comment
Имеет смысл. Спасибо. Я пытался изменить значение модели и отображаемое значение, но ваш ответ дал мне ответ: plnkr .co / edit / VH5zn4S8q28CBpFutBlx? p = превью - person Steve; 09.06.2016

arrow_upward
1
arrow_downward

Честно говоря, я все еще изучаю angular2, и технология все еще очень незрела, чтобы сказать, что это лучший способ сделать это, но после экспериментов с ней:

import {Directive, ElementRef, Output, EventEmitter} from '@angular/core';
import {NgFormControl} from '@angular/common';

@Directive({
  selector: '[uppercase]',
  host: {
    '(input)': 'onInputChange()',
  }
})

export class UppercaseDirective {

  @Output() onChange = new EventEmitter();
  rawValue: string = '';

  constructor(private model: NgFormControl, private elementRef: ElementRef) { }

  onInputChange() {
    let str = this.model.value;
    this.rawValue = this.rawValue.substring(0, str.length) + str.substring(this.rawValue.length, str.length);
    let newValue = this.rawValue.toUpperCase();
    this.model.viewToModelUpdate(newValue);
    this.model.valueAccessor.writeValue(newValue);
    this.onChange.emit(this.rawValue);
  }

}

тогда вы можете получить это так:

<input [ngFormControl]='myForm.controls.field' uppercase (onChange)="raw = $event">
<div>
   {{ raw }}
</div>

Поскольку всякий раз, когда вы обновляете модель, переменная будет изменяться. Вы должны делать это отдельно. Пробовал в вашем plnkr, и это сработало.

РЕДАКТИРОВАТЬ: Может потребоваться некоторая работа для разных сценариев, хотя, ха-ха

person Ed Morales    schedule 08.06.2016
comment
Спасибо, Эд. Однако я пытаюсь добиться, чтобы модель формы содержала необработанное значение. - person Steve; 09.06.2016
comment
@Steve Это может вас заинтересовать stackoverflow.com/ вопросы / 37800841 / - person Günter Zöchbauer; 17.06.2016