模型驱动表单验证不起作用

Question

在进行模型驱动表单验证时，它已经开始变得令人沮丧了 2 天了，现在仍然无法正常工作。

据我了解，Angular2 beta 仍然存在一些错误。我在 https://angular.io/docs/ts/latest/guide/forms.html and different example at 中使用了 angular-io 中的示例。我公司的两位程序员告诉我，他们仍然没有任何表单示例可以正常工作。

任何人都可以提供一个我可以试用的有效验证示例吗？

Answer 1

关键是建立控制组：

this.form = fb.group({
            "firstName": ['', Validators.required],
            "streetAddress": ['',Validators.required],
            "zip": ['', Validators.compose([zipValidator])],
            "type": ['home']
        });

以下是一些经过验证的表单示例：

http://www.syntaxsuccess.com/angular-2-samples/#/demo/form 更多信息在这里： http://www.syntaxsuccess.com/viewarticle/forms-and-validation-in-angular-2.0

这里还有一个动态表单的例子：

http://www.syntaxsuccess.com/angular-2-samples/#/demo/survey http://www.syntaxsuccess.com/viewarticle/dynamic-form-in-angular-2.0

Answer 2

如您所知，还有一些与 angular2 表单验证有关的未决问题。但经过大量搜索后，我发现很少有人在工作，现在作为答案发布 -

首先为了验证你必须使用 ngControl ，你也可以使用 ngModel 即 angular2 的双向绑定来获取表单的值毫无疑问我们只能使用 ngControl 进行验证和也形成价值观。但最好使用单独的。

使用 ngControl 进行验证。 angular 提供了默认验证器来检查验证，我们也可以根据需要创建自定义验证器，并可以在验证中使用 (ngControl)。如果我们要创建模型驱动的表单，即我们必须使用 new Control() 为每个输入创建新控件。对于控制、控制组和验证，请参考这篇最佳文章

下面是使用表单控件的基本示例：

this.CreateGroup = fb.group({
            'name': new Control(this.demoInfo.name, Validators.required),
            'password': new Control(this.demoInfo.password, Validators.required),
            'select': new Control(this.demoInfo.select, Validators.required)
        })

这里我有三个输入名称，密码，select。相应的我已经提到了它们的值和验证器（默认验证）。

<input type="text" [(ngModel)]='demoInfo.name' ngControl='name'>

下面是我们如何将 ngControl 定义到 HTML 端。

form in angular2 with validation.

的工作演示

模型驱动表单验证不起作用

Model Driven Form validation not working

angular2-forms

angular