0

Goal: I want to get the value of a (reactive) form control in Angular/TypeScript.

What's happening: I am able to get the values of everything except one particular field("testfield1").

Tried:

I've tried changing the name.

I've tried clearing cache and using incognito mode.

I've tried using controls[] vs .get() (as mentioned in different SO articles: How to get value of a FormControl in Angular4 ) ( formGroup.get vs formGroup.controls in reactive form - Angular )

TS:

console.log(this._pForm.controls["firstName"].value);
console.log(this._pForm.controls["lastName"].value);
console.log(this._pForm.controls["testField1"].value);
console.log(this._pForm.get("testField1").value);

HTML:

mat-form-field class="input-width">
      <input matInput placeholder="TestField" id="testfield" formControlName="testField1" value="testvalue">
</mat-form-field>

I would like to be able to get the value of "testField1." It prints values for firstName and lastName, but for testField1 it just shows null. It was working yesterday so I'm not sure what is going on now.

Abhishek
  • 1,742
  • 2
  • 14
  • 25
seesharp
  • 101
  • 1
  • 14
  • Try `this._pForm.getRawValue().firstName` – miselking Jan 29 '19 at 17:39
  • Still getting a null using that: console.log(this._pForm.getRawValue().testField1); – seesharp Jan 29 '19 at 17:47
  • Can you create a http://stackblitz.com example? That should help to resolve – Amit Chigadani Jan 29 '19 at 17:48
  • 1
    How do you instantiate the FormControl on the component? Are you passing in a value or a null value ? – Kellie Hall Jan 29 '19 at 20:36
  • @AmitChigadani this is a shortened version: https://angular-ueajwl.stackblitz.io – seesharp Jan 29 '19 at 20:50
  • @KellieHall I wanted to set it directly in the html itself (so I can use i18n on it) : – seesharp Jan 29 '19 at 20:52
  • @KellieHall Whats odd is in the HTML I have and it shows "testvalue" on the screen, but in console it says its null. TS has 'testField1': [this.user.TestField], .......... when I try again with 'testField2': ["testvalue"], it shows it in console... but it uses whats in the HTML for whats displayed on screen – seesharp Jan 29 '19 at 21:09
  • Seeing "Unhandled Promise rejection" errors in console for that StackBlitz - the issue is likely with how the [formGroup] is instantiated in the component - are you able to update your question with your component code? – Nathan Beck Jan 29 '19 at 21:37
  • I've also tried using the following, but the page ends up having the spinner icon forever. : var unit = (document.getElementById("testfield")).value console.log(unit); – seesharp Jan 30 '19 at 16:22

0 Answers0