1
resposta

Obter o valor selecionado de outro Componente em Angular informa: erro

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') });
  }
1 resposta

ERROR Error: No value accessor for form control with name: 'fontePagadora'