我是 Angular 2 的新手。
我创建了一个简单的模板,其中有两个文本字段,我想要求字段验证这两个字段。
登录表格
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)" novalidate>
<div class="container">
<div class="form-group">
ooooo <label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required [(ngModel)]="UserData.uname" #uname="ngModel">
<div *ngIf="loginForm.invalid" class="alert alert-danger">
<div [hidden]="!uname.errors.required"> Name is required </div>
</div>
</div>
<div class="form-group">
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pwd" required [(ngModel)]="UserData.pwd" #pwd="ngModel">
<div *ngIf="UserData.pwd.errors && (UserData.pwd.dirty || UserData.pwd.touched)" class="alert alert-danger">
<div [hidden]="!UserData.pwd.errors.required">Password is required </div>
</div>
<button type="submit" >Login</button>
</div>
</div>
</form>
我的组件
import { Component } from "@angular/core"
import { User } from "./UserModel"
@Component({
selector: 'my-login',
templateUrl:"app/Login/login.html"
})
export class LoginComponent
{
//alert: any("hello");
UserData: User = new User("", "");
submitted = false;
onSubmit(form: any) {
alert("dfsdfsd" + form);
if (!form.invalid) {
alert(this.UserData.uname);
alert(this.UserData.pwd);
this.submitted = true;
}
}
}
我想实施的是 -
-
当表单加载时,不应出现验证消息?
-
当用户点击提交按钮时,应显示所需的消息?
-
在两个文本框中我都应用了不同类型的检查来显示不一致的消息?所以应该有一个一致的方法来解决这个问题。
非常感谢您的帮助。
1 回答
也许使用
submitted
变量,并在模板中使用它,以便不显示消息,直到submitted
为真,我们在提交函数中将其设置为。你也不需要这里的 two-way-binding,因为你的表格产生的对象可以直接分配给你的
UserData
。我刚刚设置的验证消息就像这样,我们将用户名作为目标:
在你的提交函数中,我将
loginForm.value
作为参数而不是loginForm
传递。这样就可以准备好使用表单对象:)在您的函数中,您可以将对象分配给
UserData
变量。如果你想保留 two-way-binding,那当然是完全可能的! :)
**** DEMO