error TS2339: Property 'name' does not exist on type 'HTMLElement'

Question

profile.component.ts:

var $inputs = $('#changePasswordForm :input');
    var values = {
      oldpassword: String,
      newpassword: String
    };
    $inputs.each(function() {
      console.log(this);
      values[this.name] = $(this).val();
    });
    console.log(values.oldpassword, this.currentUser.username);

profile.component.html:

<form id='changePasswordForm'>
            <div class='form-group input-field'>
              <label for=''>Old Password*</label>
              <input type='password' [(ngModel)]='oldpassword' name='oldpassword' class='form-control'>
            </div>
            <div class='form-group input-field'>
              <label for=''>New Password*</label>
              <input type='password' [(ngModel)]='newpassword' name='newpassword' class='form-control'>
            </div>
          </form>

Error:

ERROR in src/app/components/profile/profile.component.ts(82,19): error TS2339: Property 'name' does not exist on type 'HTMLElement'.

What did i go wrong ??

well, my question is why you are using jquery in angular application because it considers a bad approach. — Farhat Zaman
Actually application is considering the Angular this instead of the jQuery so it is looking for the HTML biding for that. Ideally you should not mixed up, Angular & Jquery. It's a bad practice. — Rohit.007

Phantom Phantom · Accepted Answer · 2018-12-14T11:26:05

Try not to use JQuery in Angular

You can do your code like this in Angular(ngx). Your are using ngModel so it is two way binding, you can access this values in you component file.

HTML

<form id='changePasswordForm' (ngSubmit)="changePass()">
            <div class='form-group input-field'>
              <label for=''>Old Password*</label>
              <input type='password' [(ngModel)]='oldpassword' name='oldpassword' class='form-control'>
            </div>
            <div class='form-group input-field'>
              <label for=''>New Password*</label>
              <input type='password' [(ngModel)]='newpassword' name='newpassword' class='form-control'>
            </div>

            <button type="submit">Change Password</button>
</form>

TS (Component)

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  oldpassword: string;
  newpassword: string;

  changePass() {

// Here we are getting and setting values
    const values = {
        oldpassword: this.oldpassword,
        newpassword: this.newpassword
    };

    console.log(values);
  }
}

https://stackblitz.com/edit/ngx-change-password-demo

error TS2339: Property 'name' does not exist on type 'HTMLElement'

1 Answers