-1

In our project, we used Angular Formly to generate complex forms (with complex grouping). I checked the component documentation, but I couldn't find any sample or solution for finding the first editable component (like a textbox) and set the focus on it when the form or component is loaded.

1
  • You can just pass focus: true to your FormlyFieldConfig of your first element in the array.
    – penleychan
    Mar 1, 2022 at 3:10

1 Answer 1

0

When we want to check a "group of any" It's util use a directive. A Directive with a selector of formControl and formControlName like

@Directive({
  selector: '[formControl], [formControlName]'
})
export class InputDirective {

  constructor(private controlDir: NgControl,private el:ElementRef) { }

}

Give access to all the "inputs" control by a FormControlName or a FormControl

In our form, we can get all of them using viewChildren

@ViewChildren(InputDirective) inputs:QueryList<InputDirective>

And in ngAfterViewInit we can make some like

ngAfterViewInit()
{
   const input=this.inputs?this.inputs.find(x=>x.controlDir.enabled):null
   if (input)
       input.el.nativeElement.focus()
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.