2 回答

• 26

  将表单控件绑定到域模型

  在组件中初始化域模型：

  constructor(){
    this.student = new Student();
  }
  

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

  Name: <input [(ngModel)]="student.name" type="text">
  Password:  <input [(ngModel)]="student.password" type="text">
  

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

  <button type="button" (click)="addNewGroup(student)">Create</button>
  

  实现 addNewGroup 方法 . 要重置表单，请使用新模型更新域模型：

  addNewGroup(student:Student) {
    alert('added ' + student.name);
    this.student = new Student();
  }
  

  Demo Plnkr

  向表单添加验证器

  要添加表单验证，请将 ngFormModel 添加到表单元素并将 ngControl 装饰器添加到每个输入元素（ ngControl 是 [ngFormControl]="studentForm.controls['name']" 的语法糖）：

  <form [ngFormModel]="studentForm" />
     <input type="text" ngControl="name" />
     <input type="text" ngControl="password" />
  </form>
  

  ngFormModel 映射到组件的 ControlGroup 属性 . 使用配置对象初始化 ControlGroup ，该属性名称对应于 ngControl 属性中的值：

  constructor(fb: FormBuilder){
    this.student = new Student();
    this.studentForm = fb.group({
       'name': new Control(this.student.name, Validators.required),
       'password': new Control(this.student.password, Validators.required)
    });
  }
  

  在上面的示例中，内置的 required 验证器用于指示名称和密码是必填字段 . 然后，您可以使用表单模型上的 valid 属性检查整个表单是否有效：

  addNewGroup(student:Student) {
      if (this.studentForm.valid) {
        alert('added ' + student.name);
        this.student = new Student();
      }
      else {
        alert('form is not valid!');
      }
  }
  

  Demo Plnkr

  显示验证消息

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

  <input ngControl="name" #name="ngForm" type="text">
   <span [hidden]="name.valid"><b>Required</b></span>
  

  Demo Plnkr

  如果要创建自己的自定义验证器，请创建一个返回验证对象的方法，该对象的 boolean 属性对应于验证错误 . 例如，您可以创建一个验证器，以确保密码的第一个字母必须是数字：

  interface ValidationResult {
   [key:string]:boolean;
  }
  class PasswordValidator {
   static startsWithNumber(control: Control): ValidationResult { 
     if ( control.value && control.value.length > 0){
       if (isNaN(control.value[0]))
        return { 'startsWithNumber': true };
     }
  
     return null;
   } 
  }
  

  将验证器组合成一个验证器，并使用内置的 Validators.compose 将其传递给 Control 构造函数：

  this.studentForm = fb.group({
     'name': new Control(this.student.name, Validators.required),
     'password': new Control(this.student.password, Validators.compose([Validators.required,PasswordValidator.startsWithNumber])),
  });
  

  如果在同一个 Control 上有多个验证器，请使用 errors 对象来区分它们：

  <input ngControl="password" #password="ngForm" />
  <span [hidden]="!password.control.hasError('required')"><b>Required</b></span>
  <span [hidden]="!password.control.hasError('startsWithNumber')"><b>Must start with number</b></span>
  

  Demo Plnkr

  绑定到单选按钮列表

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

  Angular2 - Radio Button Binding

  回复于 2019-04-05T04:59:56+00:00
• 4

  UPADTED - ANGULAR2 RC4形式

  TL; DR;

  在发布angular2 RC表格之后，角度2表格已经发生了很多变化 . 其中有一些是重大突破性变化，其中一些可以忽略不计，这里是使用angular2形式的一些关键点 .

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

  • 运行 npm install @angular/forms --save

  • 为您的应用配置bootstrap方法如下：

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

  • 使用 REACTIVE_FORM_DIRECTIVES 到组件指令来使用表单功能 .

  • 创建 FormGroup 类型的Form变量

  • 使用 Validators 进行验证 .

  除此之外 FormBuilder 不是构建模型驱动形式的强制性，但它简化了语法 . formbuilder提供了三种基本语法/方法：

  • group ：构建一个新的表单组 .

  • array ：构造一个新的表单数组 .

  • control ：构造一个新的表单控件 .

  这些是在angular2 RC中使用表单的基本步骤 .

  angular2形式的有用资源：

  • https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol

  • https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

  现场演示在这里相同

  angular2 Forms的工作演示

  回复于 2019-04-05T04:59:56+00:00