3

我正在使用 Angular 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 { }

客户端错误

4

1 回答 1

28

所以对于那些遇到这个问题的人。这样做的正常原因是您的 ng-template 可能与方法调用共享一个名称。

正如你从上面看到的那样，ng-template 被称为#changePassword。在提交时，它称为“方法”changePassword()。这导致 angular 对是否应该调用方法或 ng-template 感到困惑。

更改方法名称解决了该问题。

于 2018-11-08T10:05:16.563 回答