Angular2 to show string/key used in ngModel dynamically?

Question

I am new to angular2. I have been trying to find the possible ways to show the string which is used for binding in [(ngModel)] dynamically. My objective to show the binding key which is used in HTML Elements in DOM itself based on Url param. Since my application is huge this will be more productive for development.

I need to show every ngModel string/key which is placed under any div wrapper using 'Directive'. Let say 'showModelKey' will be used to identify the elements placed under Div wrapper.

<div class='content-wrapper' showModelKey>
 <input [(ngModel)]="myFirstName" name="first_name">
  <!-- here myFirstName is ngModel string/key -->
....
 <textarea[(ngModel)]="commentModel" name="comment"></textarea>
 </div>

Here showModelKey should find the fields used under div wrapper and add another directive (if needed) to show the key which is used for ngModel binding in DOM.

From above example screen, myFirstName is ngModel key has been shown in DOM.

Please advise the possible way to achieve this.

Updated : Is it possible to override the ngModel directive? If so, can we get the key before it get parsed?

If you are looking for a way to debug/inspect the bindings in your app [Augury](https://augury.angular.io/) is a helpful Chrome extension. — JayChase, May 12 '18 at 08:22
Perhaps if you use NG_VALUE_ACCESSOR, you can intercept before override, see https://stackoverflow.com/a/46465959/3415716 — Leo Caseiro, May 16 '18 at 00:22

score 3 · Answer 1 · answered Mar 06 '18 at 06:06

3

You could do that by creating a wrapper object, which would be responsible for holding key & value pair of all dynamic values. That object name could be model inside component.

//inside component
model: any = {};

HTML

<div class='content-wrapper' showModelKey>
  <input [(ngModel)]="model[dynamicKey1]" name="first_name">
  <!-- here myFirstName is ngModel string/key -->
  ....
  <textarea[(ngModel)]="model[dynamicKey2]" name="comment"></textarea>
</div>

answered Mar 06 '18 at 06:06

Pankaj Parkar

134,766
23
234
299

since i could not update the existing ngModel key in whole application, i tried another approach based on directive. This directive should show ngModel key in DOM. Thanks again – mymotherland Mar 06 '18 at 06:19
@mymotherland don't understand you last statement, would you elaborate more on it? – Pankaj Parkar Mar 06 '18 at 06:20
Plz look on example screen. I need to show the ngModel key in DOM next to field used in component templates. – mymotherland Mar 06 '18 at 06:23
Is it possible to override the ngModel directive? If so, can we get the key before it get parsed? – mymotherland Mar 06 '18 at 11:20
Wow! A lifesaver. Thank you. – Anjana Silva Jul 11 '20 at 10:10

Angular2 to show string/key used in ngModel dynamically?

1 Answers1