Это мои @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: Обеспечить содержание директивы