Angular - Как определить события формы внутри директивы, когда они инициируются в файле component.ts? - PullRequest
Новая
       20

Angular - Как определить события формы внутри директивы, когда они инициируются в файле component.ts?

2 голосов
/ 12 марта 2019

Если у меня есть компонент с входом формы, и я хочу обнаружить два оператора в блоке OnInit как события внутри моей директивы, каков правильный способ сделать это? Мне повезло с 'input' и 'ngModelChange', но ни одно из событий, которые я пытаюсь прослушать, чтобы поймать метод patchValue () для форм, управляемых моделями, или прямое назначение для форм, управляемых шаблонами (даже если это отражается в DOM) .

Вот мой компонент: 

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms' 

@Component({
  selector: 'my-app',
  template:
  `
  <h5>Model form input</h5>
  <form [formGroup]="inputForm">
    <input patchable-input formControlName="input" />
  </form>

  <h5>Template form input</h5>
  <input patchable-input [(ngModel)]="input" />
  `
})
export class AppComponent implements OnInit {
  inputForm = new FormGroup({
    input: new FormControl('')
  })

  input = '';

  ngOnInit() {
    this.inputForm.patchValue({
      input: 'testing patch'
    })

    this.input = 'testing override'
  }
}

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

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[patchable-input]'
})
export class PatchableInputDirective  {
  @HostListener('ngModelChange', ['$event']) ngOnChanges($event) {
        console.log($event);
    }
}

и минимальное воспроизведение в StackBlitz (смотрите на консоли)

1 Ответ

1 голос
/ 12 марта 2019

Вы должны реализовать AfterViewInit вместо OnInit.Причина этого в том, что на этом этапе жизненного цикла ваша директива была инициализирована и подписана на событие ngModelChange через декоратор @HostListener.

См. Также документацию Angular Life Cycle Hooks.

стекаблиц 

import { Component, AfterViewInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms' 

@Component({
  selector: 'my-app',
  template:
  `
  <h5>Model form input</h5>
  <form [formGroup]="inputForm">
    <input patchable-input formControlName="input" />
  </form>

  <h5>Template form input</h5>
  <input patchable-input [(ngModel)]="input" />
  `
})
export class AppComponent implements AfterViewInit {
  inputForm = new FormGroup({
    input: new FormControl('')
  })

  input = '';

  ngAfterViewInit() {
    this.inputForm.patchValue({
      input: 'testing patch'
    })
  }
}
...