Угловой пользовательский элемент управления формы - обнаружение изменений при выборе mat с событием selectionChange

Question

У меня есть пользовательский элемент управления формы с mat-select внутри

Я пытаюсь прослушать событие изменения в родительском компоненте

Но мой onTouchedCallback по какой-то причине не работает

Что я сделал не так ???

Заранее спасибо ❤

Это мой пользовательский элемент управления формы:

import { Component, OnInit, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const noop = () => { };

export interface Food {
  value: string;
  viewValue: string;
}

@Component({
  selector: 'app-custom-select-form-control',
  templateUrl: './custom-select-form-control.component.html',
  styleUrls: ['./custom-select-form-control.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => CustomSelectFormControlComponent),
    },
  ]
})
export class CustomSelectFormControlComponent implements OnInit, ControlValueAccessor {
  foods: Food[] = [
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' }
  ];
  constructor() { }

  ngOnInit() {
  }


  selectedOption: String;
  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;
  propagateChange = (_: any) => { };


  writeValue(val: string): void {
    this.selectedOption = val;
  }
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

  get value(): String {
    return this.selectedOption;
  }

  set value(v: String) {
    if (v != undefined && v != null && v !== this.selectedOption) {
      this.selectedOption = v;

    }
  }


  selectionChange(e:any)
  {
    this.value = e.value;
    this.onChangeCallback(this.value);
  }

}

Это мой HTML-файл:

  <mat-form-field>
  <mat-select placeholder="Favorite food"  (selectionChange)='selectionChange($event)'>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Это мой родительский компонент Html:

<app-custom-select-form-control 
     (change)='customControlChangeDetection($event)'>
</app-custom-select-form-control>

Отладчик остановлен в selectionChange , но не достигает selectionChange в родительском контроллере

Если я перевожу выбор матов простым вводом / вводом матов - все работает хорошо.

Я пробовал также с помощью средства выбора дат матов, и там обнаружение изменений не работает

Answer 1

Напишите ваш родительский компонент примерно так,

<app-matchild (changeEvent)="parentMethod()"></app-matchild>

в файле компонента ts напишите что-то вроде этого,

  parentMethod() {
    console.log('Parent Method executed');
  }

Ваш дочерний компонент вот так,

<mat-form-field>
  <mat-select
    placeholder="Favorite food"
    (selectionChange)="selectionChange($event)"
  >
    <mat-option *ngFor="let food of ['food1', 'food2', 'food3']" [value]="food">
      {{ food }}
    </mat-option>
  </mat-select>
</mat-form-field>

в файле ts вашего дочернего компонента определите такой метод:

selectionChange(evt) {
    debugger;
    this.changeEvent.emit();
  }