Question

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

据我了解，Angular2 beta仍有一些漏洞。我使用了来自https://angular.io/docs/ts/latest/guide/forms.html的angular-io的示例和Forms In angular2处的不同示例。我公司的两名程序员告诉我他们两个人都没有任何形式的例子。

有人能为我提供一个可以尝试的验证工作示例吗？

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）中使用。如果我们要创建模型驱动的形式，即我们必须使用新的Control（）为每个输入创建新的控件。对于Control，对照组和验证参考这个最好的artical

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

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

这里我分别有三个名为name，password，select的输入。并且我已经提到了他们的值和验证器（默认验证）。

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

这是我们如何将ngControl定义为HTML方面。

form in angular2 with validation.的工作演示

Forms In angular2 Beta

模型驱动表单验证无效

2 个答案: