在按钮上单击验证 Angular 2 中的模板表单答案

【问题标题】：On Button Click Validate a template form in Angular 2在按钮上单击验证 Angular 2 中的模板表单
【发布时间】：2017-06-12 14:27:59
【问题描述】：

我是 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;
        }
    }

}

我想要实现的是-

加载表单时不应该出现验证消息？
当用户单击提交按钮时，应显示所需的消息？
在两个文本框中我应用了不同类型的检查来显示不一致的消息？所以应该有一个一致的方法来解决这个问题。

非常感谢您的帮助。

【问题讨论】：

标签： forms angular validation angular2-template

【解决方案1】：

也许利用submitted 变量，并在模板中使用它，以不显示消息，直到submitted 为真，我们将其设置为在提交函数中。

此外，您实际上并不需要此处的双向绑定，因为您的表单生成的对象可以直接分配给您的 UserData。

我刚刚设置的验证消息就像这样，我们针对的是用户名：

<div *ngIf="uname.errors?.required && submitted"> Name is required </div>

在您的提交函数中，我会将loginForm.value 作为参数传递，而不仅仅是loginForm。这样您就可以准备好使用表单对象了:)

在您的函数中，您可以将对象分配给您的UserData 变量。

onSubmit(form: any) {
  this.submitted = true;
  this.UserData = form;
}

如果您确实想保持双向绑定，那当然是完全可能的！ :)

DEMO

【讨论】：