在Angular4和Material2中提交表单

发布时间：2020-12-17 17:36:21 所属栏目：安全来源：网络整理

导读：我尝试使用Angular 4.0.0和Material 2构建我的第一个登录表单.但是Form不提交并触发该函数. form #UserLogin="ngForm" *ngIf="active" (ngSubmit)="onSubmit(UserLogin.value)"md-input-container input mdInput [(ngModel)]="data.email" ngControl="email"

我尝试使用Angular 4.0.0和Material 2构建我的第一个登录表单.但是Form不提交并触发该函数.

<form #UserLogin="ngForm" *ngIf="active" (ngSubmit)="onSubmit(UserLogin.value)">
<md-input-container>
    <input mdInput [(ngModel)]="data.email" ngControl="email" name="email" placeholder="Benutzername" type="text" required>
</md-input-container>

<md-input-container>
    <input mdInput [(ngModel)]="data.password" ngControl="password" name="password" placeholder="Passwort" type="password" required>
</md-input-container>

<button md-button class="submit-btn" type="submit" [disabled]="!UserLogin.form.valid">Login!</button>

提交功能：

onSubmit(value: any) {

    console.log('sdfdfg');

    Object.assign(value,this.additionalData);
    this.submitted = true;

    this.auth.login(value).subscribe(
        data => {
            this.loginSuccess.emit(data);
        },error => {
            for (const field in this.formErrors) {
                if (this.formErrors.hasOwnProperty(field)) {

                    this.formErrors[field] = [];
                    if (this.validationMessages[field].hasOwnProperty(error.systemCode)) {
                        this.formErrors[field].push(this.validationMessages[field][error.systemCode]);
                    }
                }
            }
        }
    );

}

当我单击登录按钮时,他不会将控制台日志输入控制台.有人有什么想法？

解决方法

更改按钮类型=“按钮”

<form #UserLogin="ngForm" (ngSubmit)="onSubmit(UserLogin)">
<md-input-container>
    <input mdInput [(ngModel)]="data.email" name="email" placeholder="Benutzername" class="form-control"  type="text" required>
</md-input-container>

<md-input-container>
    <input mdInput [(ngModel)]="data.password" name="password" class="form-control" placeholder="Passwort" type="password" required>
</md-input-container>

<button md-button class="submit-btn" type="button" [disabled]="!UserLogin.form.valid">Login!</button>
</form>

onSubmit(form: ngForm) {

console.log('sdfdfg');
console.log(form.value);

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!