Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Cannot find control with path: a -> b

Gente, socorro.. estou criando um formulário no angularem que o meu service do formulário está assim:

export class FormularioPainelService {
  formularioPainel!: FormGroup;
  linksForm!:FormGroup
  constructor(private fb: FormBuilder) {
    this.painel();
  }

  painel(): void {
    this.formularioPainel = this.fb.group({
      nome: [null, Validators.required],
      pasta: this.fb.array([], Validators.required),
      setor: [null, Validators.required],
      grupoDeAcesso: this.fb.array([], Validators.required),
      evisao: [false],
      descricao: [null],
      carrossel: [false],
      links: this.fb.array([this.criarLinkControl()]),
    });
  }

  getFormularioPainel() {
    return this.formularioPainel;
  }

  criarLinkControl(): FormGroup {
    return this.fb.group({
      link: [null, Validators.required],
      duracao: [null, Validators.required],
      ordem: [null, Validators.required],
    });
  }
  adicionarLink(): void {
    const linksArray = this.formularioPainel.get('links') as FormArray;
    linksArray.push(this.criarLinkControl());
  }

  removerLinksControl(index: number): void {
    const linksArray = this.formularioPainel.get('links') as FormArray;
    if (index >= 0 && index < linksArray.length) {
      linksArray.removeAt(index);
    }
  }

  get LinksArray(): FormArray {
    return this.formularioPainel.controls['links'] as FormArray;
  }
}

ou seja, estou tentando criar um formulário reativo. No TS do meu componente, eu tenho um método que usei para tentar encontrar o controle link, dentro de links, e ele me retorna true!

  controleDePainel: FormGroup = this.formularioPainel.getFormularioPainel();
  arrayLinkDuracaoOrdem: any[] = [];
  linksArray = this.formularioPainel.LinksArray as FormArray;

  verificarLinkNoFormArray(): boolean {
    const controls = this.linksArray.controls;

    for (const control of controls) {
      const linkControl = control.get('link');
      if (linkControl !== null) {
        return true;
      }
    }

    return false;
  }
  ngOnInit(): void {
    const linkEncontrado = this.verificarLinkNoFormArray();
    console.log('O controle link existe:', linkEncontrado);
    ...
    });
  }

e o meu html estou tentando passar o meu formulário, aqui o código vai ser mais resumido

<form
        [formGroup]="controleDePainel"
        class="input-content w-100 m-auto row mt-4 justify-content-evenly"
      >
      .....
      ....
      ....
      ...
      <div
          formArrayName="links"
          *ngFor="let linkControl of linksArray.controls; let i = index"
          class="input-fields col-12 row"
        >
          <div
            class="textfield p-0 form-group col-1"
            *ngIf="
              controleDePainel.get('carrossel')?.value && linksArray.length > 1
            "
          >
            <div class="removeIcon" (click)="removerLinksControl(i)">
              <span tooltip="remover">
                <i class="bi bi-dash-circle-fill"></i>
              </span>
            </div>
          </div>
          <div
            class="textfield p-0 form-group col-6"
            [ngClass]="{
              'col-12':
                !controleDePainel.get('evisao')?.value ||
                !controleDePainel.get('carrossel')?.value,
              'col-7': linksArray.length == 1
            }"
          >
            <!-- Acesso aos controles dentro do FormGroup -->
            <input
            formControlName="link"
              type="text"
              placeholder="Link"
              id="link{{ i }}"
            />
          </div>
          <div
            class="textfield pe-0 form-group col-3"

          >
            <!-- Acesso aos controles dentro do FormGroup -->
            <input
              formControlName="duracao"
              type="text"
              placeholder="duração (s)"
              id="tempo{{ i }}"
            />
          </div>
          <div
            class="textfield pe-0 form-group col-2"
            
          >
            <!-- Acesso aos controles dentro do FormGroup -->
            <input
              formControlName="ordem"
              type="text"
              placeholder="nº"
              id="ordem{{ i }}"
            />
          </div>
        </div>
        ...
        ...
      

por favor, conseguem me ajudar? o erro q tenho do navegador é: ERROR Error: Cannot find control with path: 'links -> link'

2 respostas
solução!

E aí, Ariel!

Então, o problema pode estar no seu HTML. Quando você faz formControlName="link" no input, o Angular tá esperando que esse controle esteja diretamente no formulário principal, mas na real, ele tá dentro de um FormArray chamado 'links'.

Para resolver, você precisa indicar isso de forma correta. Em vez de formControlName="link", usa formControlName="links[i].link". Fica assim:

<input formControlName="links[i].link" type="text" placeholder="Link" id="link{{ i }}" />

Faz o mesmo ajuste nos outros inputs dentro do loop do FormArray. Isso deve deixar o Angular feliz e resolver o erro que tá aparecendo.

Tenta aí e me conta se resolveu, beleza?

Olá! a sua sugestão me guiou para a resposta! muito obrigado! Da forma q vc me sugeriu, não deu certo, ele deu erros e nem abriu o componente, então seguindo a luz da sua lógica eu fiz

          <div
            *ngFor="let linkControl of linksArray.controls; let i = index"
            [formGroupName]="i"
            class="input-fields col-12 row"
     >
.....

como pode ver, eu suvi uma div para chamar o formulário e nas seguinte, eu consigo chamar os index, e deu certo! muito obrigado por sua ajuda!