Angular2表格：验证、ngControl、ngModel等

使用angular2 beta

表格

。经过大量搜索，没有发现任何有用的东西。希望有人能帮帮我

基本上，我有点困惑如何正确使用angular2中的表单（即使用ngControl、ngFormControl等）。我在这里创建了一个plnkr

以下是我的.html代码：-

姓名：
密码：
B技术
Mtech
数学
英语
科学类


一个值
二值
三值
创造

和。ts代码如下：-

CreateGroup:FormBuilder；
构造函数（fb:FormBuilder）{
log（'formcalled'）；
this.CreateGroup=fb.group({
“名称”：新控件（），
“密码”：新控件（）
})
}
addNewGroup（值）{
console.log（值）；
document.getElementById（“myForm”）.reset（）；
}
getValue（值）{
console.log（值）；
}

我无法理解如何从完整表单中获取作为对象的值。我的表单包括文本框、复选框、收音机和选择选项。下面是我的几个问题

Q1:-如何获取无线电值，复选框，选择使用angular2中的表格。（我不想调用

change

hook来选择我在plnkr中使用的选项）

问题2：提交数据表单后，plnkr中的控件未重置。窗体的控件仍然存在，但窗体似乎已重置。那么如何在angular2中重置窗体的控件

Q3:-在表格中使用验证的最佳方法是什么（如果任何人有plnkr显示验证，请张贴）

我读过这篇关于表单的文章，但仍然没有成功地使用无线电复选框和选择选项

将表单控件绑定到域模型 在组件中初始化域模型：

constructor（）{
this.student=新学生（）；
}

使用

ngModel

将表单控件绑定到具有双向模型绑定的域模型

名称：
密码：

单击按钮时，将域模型作为参数传递：

创建

执行

addNewGroup

方法。要重置表单，请使用新模型更新域模型：

addNewGroup（学生：学生）{
警报（'已添加'+学生名称）；
this.student=新学生（）；
}

向表单中添加验证程序 要添加表单验证，请将

ngFormModel

添加到表单元素中，并将

ngControl

装饰器添加到每个输入元素中（

ngControl

是

[ngFormControl]=“studentForm.controls['name']”的语法糖）

：

ngFormModel

映射到组件的

ControlGroup

属性。使用一个配置对象初始化

ControlGroup

，该配置对象的属性名称对应于

ngControl

属性中的值：

构造函数（fb:FormBuilder）{
this.student=新学生（）；
this.studentForm=fb.group({
“名称”：新控件（this.student.name，Validators.required），
“密码”：新控件（this.student.password，Validators.required）
});
}

在上面的示例中，内置的

required

验证器用于指示名称和密码是必填字段。然后，您可以使用表单模型上的

valid

属性检查整个表单是否有效：

addNewGroup（学生：学生）{
if（this.studentForm.valid）{
警报（'已添加'+学生名称）；
this.student=新学生（）；
}
否则{
警报（'表单无效！'）；
}
}

显示验证消息 如果要绑定到视图中的验证消息，可以将控件作为本地模板变量导出，并访问其验证属性：valid、dirty、pending、pristine和errors对象

要求的

如果要创建自己的自定义验证器，请创建一个方法，该方法返回一个验证对象，该验证对象的

boolean

属性对应于验证错误。例如，您可以创建一个验证程序，确保密码的第一个字母必须是数字：

接口验证结果{
[键：字符串]：布尔值；
}
类密码验证器{
静态StartWithNumber（控件：控件）：ValidationResult{
if（control.value&&control.value.length>0）{
if（isNaN（控制值[0]））
返回{'startsWithNumber'：true}；
}
返回null；
} 
}

将验证器组合到一个验证器中，并使用内置的

验证器将其传递给
控件
构造函数。组合

：

this.studentForm=fb.group({
“名称”：新控件（this.student.name，Validators.required），
“密码”：新控件（this.student.password，Validators.compose（[Validators.required，PasswordValidator.startsWithNumber]），
});

如果同一

控件上有多个验证器

，请使用

错误

对象来区分它们：

要求的
必须以数字开头

绑定到单选按钮列表 在Angular2中，还没有绑定到单选按钮列表的内置支持。查看此帖子了解如何执行此操作：

UPADTED-ANGULAR2 RC4表格 TL；博士

angular2 RC表格发布后，angular2表格有很多变化。其中有些是重大的突破性变化，有些可以忽略不计，以下是使用angular2表格的一些要点

在Angular 2中，基本上有两种构建表单的方法，即模板驱动和模型驱动。 使用表单的基本结构如下：-

• 运行

  npm安装@angular/forms--save

• 按以下方式配置应用程序的引导方法：

  bootstrap(AppComponent, [
    disableDeprecatedForms(), // disable deprecated forms
    provideForms(), // enable new forms module
  ]);
  

• 使用

  REACTIVE\u FORM\u指令

  到组件指令以使用表单功能

• 创建表单变量