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

Question

当使用模型驱动的表单验证时，它开始变得令人沮丧，到目前为止，它还没有工作2天。

据我所知，Angular2测试版仍然存在一些bug。我在https://angular.io/docs/ts/latest/guide/forms.html使用了角-io的例子，在angular2中的表单使用了不同的例子。我公司的两位程序员告诉我，他们都还没有任何形式的例子。

有人能给我提供一个我可以试用的验证示例吗？

Answer 1

正如您已经知道的，仍然存在一些与带有验证的angular2表单相关的未决问题。但是在搜索了很多之后，我发现几乎没有人在工作，而现在我的答案是-

首先，对于验证，您必须使用ngControl，也可以使用ngModel，即angular2的双向绑定来获取表单值，毫无疑问，我们只能使用ngControl进行验证，也可以使用表单值。但是，使用单独的方法是很好的做法。

使用ngControl进行验证。有默认的验证器，通过角检查验证，我们也可以根据需要创建我们的自定义验证，并且可以在验证(ngControl)中使用。如果我们要创建模型驱动的表单I，那么我们必须使用()为每个输入创建新的控件。对于控件、控制组和验证，请参阅这篇最佳文章

• http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
• http://blog.jhades.org/introduction-to-angular-2-forms-template-driven-vs-model-driven/

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

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

这里我有三个输入，分别命名为名称、密码、选择。相应地，我已经提到了它们的值和验证器(默认验证)。

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

下面是我们如何定义ngControl以输出HTML。

表单在angular2中具有验证性。的工作演示

• angular2 Beta中的表单

Answer 2

关键是构建控制组：

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