ОШИБКА TypeError: jit_nodeValue_11 (...) не является функцией в Object.eval [как handleEvent] (HomeComponent.html: 77) - PullRequest
Новая
       8

ОШИБКА TypeError: jit_nodeValue_11 (...) не является функцией в Object.eval [как handleEvent] (HomeComponent.html: 77)

0 голосов
/ 30 октября 2018

Я использую Anugular 7 и угловой материал. В настоящее время я получаю сообщение об ошибке при попытке отправить форму через

(ngsubmit) = "Changepassword (FormData)"

Другие ngSubmits на странице работают без проблем при отправке. Просто интересно, если у кого-то была эта проблема / знает о решении.

home.component.html (фрагмент) 

<ng-template #changePassword let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Change Password</h4>
        <button type="button" class="close" (click)="d('Cross Click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div *ngIf="msg" role="alert" class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <mat-icon>done</mat-icon>
            <span class="sr-only">Error:</span>
            {{modalMsg}}
        </div>
        <form novalidate (ngSubmit)="changePassword(changePasswordFrm)" [formGroup]="changePasswordFrm">
            <div class="form-group">
                <div>
                    <span>Email Address*</span>
                    <input type="text" class="form-control" value="{{emailAddress}}" readonly formControlName="EmailAddress" />
                </div>
                <div>
                    <span>Old Password*</span>
                    <input type="password" class="form-control" value="{{password}}" readonly formControlName="OldPassword" />
                </div>
                <div>
                    <span>New Password*</span>
                    <input type="password" class="form-control" placeholder="New Password" formControlName="NewPassword" />
                </div>
                <div>
                    <span>Confirm Password*</span>
                    <input type="password" class="form-control" placeholder="Confirm Password" formControlName="ConfirmPassword" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" [disabled]="changePasswordFrm.invalid" class="btn btn-primary">Change Password</button>
                <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Cancel</button>
            </div>
        </form>
    </div>
</ng-template>

home.component.ts 

createChangePasswordFrm() {
        this.changePasswordFrm = this.fb.group({
            EmailAddress: "",
            OldPassword: "",
            NewPassword: ["", Validators.required],
            ConfirmPassword: ["", Validators.required]
        });
    }

changePassword(formData: any): void {
    this.loginService.changeUserPassword(formData).subscribe(
        data => {
            if (data.Successful) {
                this.msg = data.Information;
                this.createLoginFrm();
                this.activeModal.close();
                this.isLoading = false;
            }
            else {
                this.modalMsg = data.Information;
            }
        },
        error => this.modalMsg = error);
}

app.module.ts 

    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 { }

Client Error

1 Ответ

0 голосов
/ 08 ноября 2018

Так что для тех, кто сталкивался с этой проблемой. Обычная причина этого заключается в том, что ваш ng-шаблон, возможно, разделяет имя с вызовом метода.

Как вы можете видеть сверху, ng-шаблон назывался #changePassword. При отправке вызывается «метод» changePassword (). Это привело к тому, что angular запутался в том, должен ли он вызывать метод или шаблон ng.

Изменение имени метода решило проблему.

...