Angular 6.10.0 - @Directive и Reactive Forms - PullRequest
       24

Angular 6.10.0 - @Directive и Reactive Forms

0 голосов
/ 03 февраля 2020

Это мои @Directive

/* Imports */
@Directive({
  selector: '[ngModel][myLabel]'
})
export class MyDirective {

  lastValue: string;

  constructor(private myService: MyService) {}

  @HostListener('input', ['$event']) onInput($event)
  {
    var start = $event.target.selectionStart;
    var end = $event.target.selectionEnd;
    $event.target.value = this.myService.format($event.target.value);
    $event.target.setSelectionRange(start, end); // Preserve the cursor position
    $event.preventDefault(); // A new event will be fired below

    // Avoid infinite loop
    if (!this.lastValue || (this.lastValue && $event.target.value.length > 0 && this.lastValue !== $event.target.value)) {
      this.lastValue = $event.target.value;

      // Must create a new "input" event since we have changed the value of the input, if not, there are no change detected in the value
      const evt = document.createEvent('HTMLEvents');
      evt.initEvent('input', false, true);
      $event.target.dispatchEvent(evt);
    }
  }
}

На «нормальной» angular форме <input> ограничены моей директивой

<!-- Expected behaviour works perfectly -->
<form (ngSubmit)="submit()" #form=ngForm>
  <input myLabel type="text" ... >
</form>

Но когда дело доходит до ReactForms моя директива не применяется к <input>

<!-- @Directive not applied -->
<div *ngSwitchDefault [formGroup]="myFormGroup">
  <input myLabel type="text" ... />
</div>

Я не смог найти в Интернете ответ о Как применить директиву к ReactForm? .
Я знаю, что должен использовать Validator, но мой @Directive уже существует, и создание двух правил форматирования будет дублировать логи c (как форматировать входные данные), которые не кажутся чистыми ...

РЕДАКТИРОВАТЬ: Моя Директива хорошо объявлена ​​в app.module.ts
РЕДАКТИРОВАТЬ 2: Обеспечить содержание директивы

1 Ответ

1 голос
/ 03 февраля 2020

Самым быстрым решением imho будет создание валидатора для визуализации и наблюдение значенияChanges FormControl:

form.get('inputName').valueChanges.subscribe(value=>{
    // Code from your onInput @HostListener
});

Валидатор будет go с инициализацией формы:

this.form.group({ inputName: ['initialValue', yourValidator]});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...