add a ref to access nativeElement

[its-dibo]

fields:[
 {
  key:"test",
  type:"input",
  ref:"test"  //adds <input #test >, so we can access this input from our component via @viewChild()
]

[aitboudad]

not sure if that possible with angular, to get the nativeElement of the input you may rely on the field id instead:

document.querySelector(`#${field.id}`)

[its-dibo]

but what I mean is to access the element in your component file. not in DOM tree

example:

//my.component.html
<form #formRef>
 <input #elementRef>
</form>

//my.component.ts
class MyComponent {
  @ViewChild("formRef", { static: false }) formRef;
  @ViewChild("elementRef", { static: false }) elementRef;
  test;

//now we can access formRef & elementRef, for example:
onSubmit(){
 //do some stuff to submit the form, or send the data to the server
 this.formRef.reset(); 
 this.test = this.elementRef.nativeElement.value;
 }
}

[aitboudad]

Currently, there is no straight way to implement this feature, sorry about that 🙏!

Blocked by:

• Support for Dynamic Content Projection angular/angular#8563
• Dynamically defined template reference variables angular/angular#33233

[its-dibo]

I don't talk about dynamically rendering the template, I talk about a feature already supported by Angular

https://itnext.io/working-with-angular-5-template-reference-variable-e5aa59fb9af

https://angular.io/api/core/ElementRef

[aitboudad]

I know exactly what you were talking about 😃, we create field components dynamically using ComponentFactoryResolver which AFAIK angular doesn't recognize by ViewChild (correct me if I'm wrong).

[vmtzgr]

Is there a solution available for this now? I need to reference some of my fields (ng-select, ionic inputs...) in a reusable subform...