13

在 angular2 beta 上工作Forms。经过大量搜索发现没有任何用处。希望这里有人帮助我。

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

http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview

这是我的 .html 代码：-

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">

  <div class="col-md-7">
Name: <input type="text" id="name" placeholder="Name" class="form-control" ngControl="name">
  </div>
  <div class="col-md-7">
  Password:   <input type="text" id="password" placeholder="password" class="form-control" ngControl="password">
  </div>

  <div class="col-md-7">
    <input type="radio" name='type'>Btech
    <input type="radio" name='type'>Mtech
  </div>

  <div class="col-md-7">
    <input type="checkbox" >Math
    <input type="checkbox">English
    <input type="checkbox">Science
  </div>
  <br>
  <div class="col-md-7">
    <select #selectOption (change)='getValue(selectOption.value)' class='form-control'>
      <option value='1'>One Value</option>
      <option value='2'>two Value</option>
      <option value='3'>Three Value</option>
    </select>
  </div>
</form>
<button type="button" (click)="addNewGroup(CreateGroup.value)" class="btn btn-primary btn-lg"> Create </button>

和 .ts 代码在这里：-

CreateGroup: FormBuilder;
  constructor(fb: FormBuilder){
    console.log('form called');

    this.CreateGroup = fb.group({
            'name': new Control(),
            'password': new Control()
        })
  }
  addNewGroup(value) {
    console.log(value);
    document.getElementById("myForm").reset();
  }

  getValue(value){
    console.log(value);
  }

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

Q1:- 如何使用 angular2 中的表单获取单选、复选框、选择的值。change（我不想像我在 plnkr 中使用的那样为选择选项调用钩子）。

Q2：--因为在plnkr提交数据后表单控件没有被重置。对表单的控制仍然存在，但表单似乎已重置。那么如何在angular2中重置表单的控制。

Q3：- 在表单中使用验证的最佳方法是什么（如果有人有 plnkr 显示验证，请发布）。

我已经阅读了有关表单的这篇文章，但仍然没有成功使用单选复选框和选择选项。

http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2

4

2 回答 2

27

将表单控件绑定到域模型

在组件中初始化域模型：

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

演示计划

向表单添加验证器

要添加表单验证，请添加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!');
    }
}

演示计划

显示验证消息

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

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

演示计划

如果要创建自己的自定义验证器，请创建一个返回验证对象的方法，该对象的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;
 } 
}

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

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>

演示计划

绑定到单选按钮列表

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

Angular2 - 单选按钮绑定

于 2016-02-13T20:54:58.077 回答
4

已更新 - ANGULAR2 RC4 表格

TL;博士;

angular2 RC Forms 发布后，angular2 表单发生了很多变化。其中一些是重大的重大变化，其中一些可以忽略不计，这里是使用 angular2 形式的一些关键点。

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

  • 跑npm install @angular/forms --save

  • 为您的应用程序配置引导方法，如下所示：

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

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

  • 创建类型的表单变量FormGroup
  • 用于Validators验证目的。

除此之外， FormBuilder不是构建模型驱动表单的强制要求，但它简化了语法。formbuilder 提供了三种基本语法/方法：

  • group：构造一个新的表单组。
  • array：构造一个新的表单数组。
  • control：构造一个新的表单控件。

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

angular2 形式的有用资源：

现场演示同样在这里

Working Demo for angular2 Forms

于 2016-08-09T18:40:57.997 回答