gpt4 book ai didi

angular - 在 Angular4 和 Material2 中提交表单

转载 作者:太空狗 更新时间:2023-10-29 17:27:04 27 4
gpt4 key购买 nike

我尝试使用 Angular 4.0.0 和 Material 2 构建我的第一个登录表单。但是该表单不会提交并触发该功能。

<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);

}

关于angular - 在 Angular4 和 Material2 中提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44065405/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com