Как обнаружить событие размытия на дочернем компоненте в родительском

Я работаю над проектом angular, и у меня проблема с установкой сообщения об ошибке проверки в поле. Я хочу установить класс ошибки при прикосновении к компоненту и недопустимой модели.

Я попытался поместить событие (размытие) в дочерний компонент и событие внутри html дочернего компонента.

<!--parent-->
<form #formGlobal="ngForm>
<child-component (modelChange)="syncWithHiden()" ></child-component>
<input type="hidden" #data="ngModel">
</form>

<!--child component-->
<form>
<ng-select></ng-select>
</form>

Я хочу установить скрытый ввод # данные грязными или затронутыми, когда пользователь нажимает на ng-select и оставляет пустым значение


typescript angular event-binding viewchild
person francesco    schedule 06.09.2019    source источник
comment
возможно, вместо использования (blur) вам следует использовать [ngModel]="var" и (ngModelChagne)="processEvent(data)"   -  person rhavelka    schedule 06.09.2019

Ответы (1)


arrow_upward
3
arrow_downward

Самый простой способ обработать событие, которое происходит в дочернем элементе от родителя, - это создать событие вывода в дочернем элементе, которое генерируется при возникновении события, которое вы хотите обработать, и которое затем обрабатывается из родительского элемента.

По сути,

child.ts

@Component({
  selector: 'child-component',
  template: `
    <form>
      <ng-select (blur)="internalEventHandler(data)">....</ng-select>
    </form>  
  `,
  styles: []
})

export class ChildComponent  {
  @Output() event = new EventEmitter();

  internalEventHandler = (dataToOutput: any) => this.event.emit(dataToOutput);
}

parent.ts

@Component({
  selector: 'parent-component',
  template: `
    <form #formGlobal="ngForm>
      <child-component (event)="handleChildEvent($event)"></child-component>
      <input type="hidden" #data="ngModel">
    </form>
  `,
  styles: []
})

export class ParentComponent  {
  handleChildEvent = (dataFromChild) => {
    //do stuff...
  }
}
person Rich    schedule 06.09.2019
comment
проблема в том, что ng-select не реагирует на событие размытия - person francesco; 06.09.2019
comment
тогда ваш вопрос не должен быть связан с родительско-дочерним компонентом, а сам ng-select - person Icycool; 06.09.2019
comment
Согласно документации ng-select, событие размытия должно работать как (blur): Fired on select blur - person Rich; 06.09.2019
comment
Если у вас возникают проблемы с запуском события blur при использовании ng-select, это следует задать в отдельном вопросе. В моем ответе предполагается, что компонент ng-select правильно запускает событие blur. - person Rich; 06.09.2019