How to get ElementRef reference from NgModel FormControl in NgForm in Angular 4+
Solution 1
I would simply add read
option to ViewChild
query:
@ViewChild('item_name', { read: ElementRef }) item_name: ElementRef;
^^^^^^^^^^^^^^^
See also
Solution 2
Just to give a use case, you can point #item_name
to ngModel
to access some attributes of the model itself, for example if it's currently considered valid.
<input id="item_name" name="item_name" [(ngModel)]="itemName" #item_name="ngModel"
autofocus class="form-control">
<!-- here's where you can access the attributes if it's pointed to ngModel-->
<small [hidden]="password.valid">
The item name is not valid
</small>
If you don't need this rather fancy stuff, you can just remove it, as Andriy proposed. Then it's working out of the box with no further changes.
If you need to keep it however, you can give your input field an additional reference which you can use to get the ElementRef.
<input id="item_name" name="item_name" [(ngModel)]="itemName"
#item_name="ngModel" #itemNameField autofocus class="form-control">
You just have to reference the one that is not pointing to ngModel
.
@ViewChild('itemNameField') itemNameField: ElementRef;
Angular does not complain about having multiple references on one field (as far as I tested it)
asmmahmud
I'm a full-stack developer and also a software architect and analyst. I love to build web applications and software architecture from scratch. Currently, my main area of interest is developing microservice architecture. I've strong expertise on the followings languages and technologies: JavaScript PHP Node.js Java Python JavaScript frameworks: a) React.js / React Native / Next.js b) Angular (v2+) Node.js Frameworks: a) Express.js b) Loopback c) Sails.js PHP Frameworks: a) Laravel b) CodeIgniter c) CakePHP Python & Java Framework: a) Django b) Spring Boot Microservice Tool/Platform: a) WSO2 API Manager, Micro Integration, Identity Server b) Istio Service Mesh c) Kong Gateway
Updated on June 13, 2022Comments
-
asmmahmud almost 2 years
In Angular 4+, I've following template driven form:
<form #addForm="ngForm" (ngSubmit)="onFormSubmit($event, addForm)" > <div class="form-group"> <label for="item_name">Item Name</label> <input id="item_name" name="item_name" [(ngModel)]="itemName" #item_name="ngModel" autofocus class="form-control" required minlength="4" maxlength="20" aria-describedby="itemNameHelpBlock"> <small *ngIf="(item_name.invalid && item_name.touched)" id="itemNameHelpBlock" class="form-text text-error" > Value must be at least 4 characters and must not exceed 20 characters </small> </div> <div class="form-group"> <label for="item_type">Item Type</label> <input id="item_type" name="item_type" [(ngModel)]="itemType" #item_type="ngModel" class="form-control" required minlength="2" maxlength="20" aria-describedby="itemTypeHelpBlock"> <small *ngIf="(item_type.invalid && item_type.touched)" id="itemTypeHelpBlock" class="form-text text-error" > Value must be at least 2 characters and must not exceed 20 characters </small> </div> <button class="btn btn-output-primary btn-lg" [disabled]="!addForm.form.valid">Add</button> </form>
In the component section, I want to access the form field (ie
item_name
,item_type
) asElementRef
so that I can access their correspondingDOM
element through thenativeElement
method ofElementRef
class.I've tried with
@ViewChild
but, it returnsNgModel
class object:@ViewChild('item_name') item_name: ElementRef; ngAfterViewInit() { console.log(this.item_name); // it returns NgModel class object }
But, I need to access the DOM
HTMLElement
of#item_name
form field so that I can reset document focus to#item_name
input field after every form submission. Now, I don't know how I can do it without directly accessing the DOM and I don't wanna directly access the DOM via DOM api.I would be glad if I get some help here.
-
asmmahmud over 6 yearsBut, I can't do that because I need to use template driven Input Field validation of
NgForm
, likerequired
,minlength
and need to checkitem_name.invalid
,item_name.touched
etc. -
asmmahmud over 6 yearsGreat! It works like a charm. Thanks a lot @Benedikt.
-
asmmahmud over 6 yearsNice! This also works. Thanks. This is more standard way.
-
Andriy over 6 yearsactually, you can access all your form elements via its root ngForm directive (angular.io/guide/forms#ngForm) and element's name.
this.addForm.form.get('item_name')
will get you an element, You can even use reactive forms API likethis.addForm.form.get('item_type').disable()
. You also can additional empty template reference as suggested Benedict. I updated my plunker, click 'Focus' button