Criei um componente de select para receber uma lista de dados , ao utilizar esse dado em outro componente não estou conseguindo receber o valor deste componente selecionando
Compomente criado, arquivo TS:
selector: 'reinf-input-fonte-pagadora',
export class InputFontePagadoraComponent implements OnInit {
formControlFontePagadora = new FormControl();
positionTooltip: TooltipPosition = 'right';
//variável de referência para mostrar os dados no campo de busca do fontePagadora
inputFontePagadora: InputFontePagadoraInterface[] = [];
responseApi: string = '';
fontePagadorasSelecionadas: InputFontePagadoraInterface[] = new Array<InputFontePagadoraInterface>();
fontePagadorasFiltradas: Observable<InputFontePagadoraInterface[]>;
lastFilter: string = '';
Componente criado, arquivo html
<mat-form-field class="col-md-auto">
<input type="text" placeholder="Selecione a fonte pagadora" aria-label="Selecione a fonte pagadora" matInput
[matAutocomplete]="auto" [formControl]="formControlFontePagadora" (focus)="limpaCampoFontePagadoras()"
(focusout)="mostraFontePagadorasSelecionadas()">
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let fontePagadora of fontePagadorasFiltradas | async" [value]="fontePagadorasSelecionadas">
<div (click)="optionClicked($event, fontePagadora)" [matTooltip]="fontePagadora.nomeFontePagadora"
[matTooltipPosition]="positionTooltip">
<mat-checkbox [checked]="fontePagadora.selected" (change)="toggleSelection(fontePagadora)" (click)="$event.stopPropagation()"
color="primary">
{{ fontePagadora.cnpjFontePagadora}} - {{fontePagadora.nomeFontePagadora}}
</mat-checkbox>
</div>
</mat-option>
</mat-autocomplete>
Componente pai , arquivo html onde é usado :
<reinf-input-fonte-pagadora
id='fontePagadora'
name='fontePagadora'
formControlName='fontePagadora'
[formControl]="formulario.controls['fontePagadora']"
isRequerid="true">
</reinf-input-fonte-pagadora>
Componente pai , arquivo ts:
private createForm() {
this.formulario = this.fb.group({
competenciaInicial: ['', Validators.required],
competenciaFinal: ['', Validators.required],
fontePagadora: ['', Validators.required],
//Validators.compose([Validators.required, emailValidator])
}, { validator: competenciaValidator('competenciaInicial', 'competenciaFinal') });
}