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'