title: ERROR TypeError: jit_nodeValue_11(...) is not a function at Object.eval [as handleEvent] (HomeComponent.html:77)
body: <p>I am using Anugular 7 and angular material. I am currently getting an error when trying to submit a form via </p>
  
  <p>(ngsubmit)="changePassword(formData)"</p>
  
  <p>The other ngSubmits on the page are working without issue on submit. Just wondering if anyone has had this issue/knows of a resolution.</p>
  
  <p><strong>home.component.html (snippet)</strong></p>
  
  <pre><code>&lt;ng-template #changePassword let-c="close" let-d="dismiss"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;Change Password&lt;/h4&gt;
          &lt;button type="button" class="close" (click)="d('Cross Click')"&gt;
              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;div *ngIf="msg" role="alert" class="alert alert-success alert-dismissible"&gt;
              &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
              &lt;mat-icon&gt;done&lt;/mat-icon&gt;
              &lt;span class="sr-only"&gt;Error:&lt;/span&gt;
              {{modalMsg}}
          &lt;/div&gt;
          &lt;form novalidate (ngSubmit)="changePassword(changePasswordFrm)" [formGroup]="changePasswordFrm"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div&gt;
                      &lt;span&gt;Email Address*&lt;/span&gt;
                      &lt;input type="text" class="form-control" value="{{emailAddress}}" readonly formControlName="EmailAddress" /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;span&gt;Old Password*&lt;/span&gt;
                      &lt;input type="password" class="form-control" value="{{password}}" readonly formControlName="OldPassword" /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;span&gt;New Password*&lt;/span&gt;
                      &lt;input type="password" class="form-control" placeholder="New Password" formControlName="NewPassword" /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;span&gt;Confirm Password*&lt;/span&gt;
                      &lt;input type="password" class="form-control" placeholder="Confirm Password" formControlName="ConfirmPassword" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="submit" [disabled]="changePasswordFrm.invalid" class="btn btn-primary"&gt;Change Password&lt;/button&gt;
                  &lt;button type="button" class="btn btn-outline-dark" (click)="c('Save click')"&gt;Cancel&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p><strong>home.component.ts</strong></p>
  
  <pre><code>createChangePasswordFrm() {
          this.changePasswordFrm = this.fb.group({
              EmailAddress: "",
              OldPassword: "",
              NewPassword: ["", Validators.required],
              ConfirmPassword: ["", Validators.required]
          });
      }
  
  changePassword(formData: any): void {
      this.loginService.changeUserPassword(formData).subscribe(
          data =&gt; {
              if (data.Successful) {
                  this.msg = data.Information;
                  this.createLoginFrm();
                  this.activeModal.close();
                  this.isLoading = false;
              }
              else {
                  this.modalMsg = data.Information;
              }
          },
          error =&gt; this.modalMsg = error);
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>    import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { CommonModule, APP_BASE_HREF } from "@angular/common";
  import { MatFormFieldModule, MatSelectModule, MatDialogModule, MatTableModule } from "@angular/material";
  import { MatIconModule} from "@angular/material/icon";
  import { ReactiveFormsModule, FormsModule } from "@angular/forms";
  import { HttpClientModule } from "@angular/common/http";
  import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
  import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
  
  import { appRoutingModule } from "./app.routing";
  
  import { AppComponent } from "./app.component";
  import { HomeComponent } from "./component/home/home.component";
  import { UsersComponent } from "./component/users/users.component";
  
  import { AuthService } from "./service/auth.service";
  import { LoginService } from "./service/login.service";
  import { UserService } from "./service/user.service";
  import { ResourceService } from "./service/resource.service";
  
  
  @NgModule({
      declarations: [
          AppComponent,
          HomeComponent,
          UsersComponent
      ],
      imports: [
          BrowserModule,
          MatIconModule,
          MatFormFieldModule,
          MatSelectModule,
          MatDialogModule,
          MatTableModule,
          ReactiveFormsModule,
          FormsModule,
          CommonModule,
          BrowserAnimationsModule,
          HttpClientModule,
          NgbModule.forRoot(),
          appRoutingModule
      ],
      providers: [{ provide: APP_BASE_HREF, useValue: '/' }, AuthService, LoginService, UserService, ResourceService],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/rDYrW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rDYrW.jpg" alt="Client Error"></a></p>