Angular 角度形式2

对于如何在angular2 beta中使用表单（模板或模态驱动的From）有点困惑

目前我使用的是模态驱动的表单，但我的form.html出现了一些错误：

<form [ngFormModel]="demo">
        <input type="text"  [ngFormControl]="demo.controls['name']">
        <input type="text"  [ngFormControl]="demo.controls['batch']">
        <div> 
            <input type="radio" [ngFormControl]="demo.controls['radio']" name="status" value="true"> Active
            <input type="radio" [ngFormControl]="demo.controls['radio']" name="status" value="false">Inactive 
        </div>
        <div> 
            <input type="checkbox" [ngFormControl]="demo.controls['checkbox']" name="one" value="one"> one
            <input type="checkbox" [ngFormControl]="demo.controls['checkbox']" name="two" value="two">two 
        </div>
        <select [ngFormControl]="demo.controls['select']">
            <option value="one">Oone</option>
            <option value="two">two</option>
            <option value="three">three</option>
            <option value="four">four</option>
        </select>
        <button type="button" class="btn btn-primary btn-lg" data-dismiss="modal" (click)="demoSubmit(demo.value)">Done</button>
</form>

因此，我的问题是：

哪种形式是最好的模板或模式驱动，为什么

何时使用ngControl和何时使用ngModal

PS:-在本例中，我无法获取选中的单选按钮和复选框的值。我是否做错了什么，在本例中，我是模态驱动表单的来源

欢迎任何好的参考或例子。

---

谢谢。

我的选择是使用

ngFormModel

和

ngControl

，因为我们可以更轻松地收集表单数据并进行验证等

---

更多细节请参见我的项目

我猜ngModal指的是ngModel

“1-哪种形式是最好的模板或模式驱动形式，为什么？”

发件人：

要创建新的控件组并隐式使用控件，请使用：

ngForm

和

ngControl

要绑定到现有控件组和控件，请使用：

ngFormModel

和

ngFormControl

基本上，一个更方便，但给你更少的控制，我个人尝试使用模板驱动，因为它更简单，更少的代码，直到它是不够的，然后我切换到模型驱动

2-何时使用ngControl和何时使用ngModel

我不知道您是否在这里混合了一些概念，但ngControl和ngModel并不是要相互替换的，ngModel处理输入组件和域/表示模型之间的同步，而ngControl根据验证程序、输入脏度等处理表单状态，更倾向于提供反馈和允许/阻止用户提交未验证的表单

可以相互替代的是我在前面的回答1中提到的

我希望这有助于澄清一点

对于复选框和收音机的值，您只有ngFormControl，添加ngModel将它们的值映射到您的模型中。再次引用同一页的内容：

<input type="text" id="productNameInput" placeholder="Product Name" [ngFormControl]="myForm.find('productName')" [(ngModel)]="productName">

---

您可以看到他正在使用

ngFormControl

和

ngModel

尝试在formbuilder中使用

新的RadioButtonState（布尔值，字符串）

前

模板：

<form [ngFormModel]="form" (ngSubmit)="doIt()">
    <h3>DisOrDat</h3>
    <hr />              
    <p>Choose</p>
    <div ngControlGroup="disOrDat">
        <div class="radio">
            <label>
                <input type="radio" name="choose" value="dis" ngControl="dis">Dis                                   
            </label>
            <label>
                <input type="radio" name="choose" value="dat" ngControl="dat">Dat
            </label>
        </div>
    </div>    
</form>

---

在angular2中已清除了一些与表单相关的要点，因此作为答案发布可能会对某人有所帮助

何时使用ngControl，何时使用ngModel？ 基本上，我们可以使用ngControl来获取表单的值以及进行验证，但是使用这种方法存在一些问题，所以最好的解决方案是根据我使用

ngModel

将表单的值获取到类中，并使用

ngControl

进行验证。angular提供了默认验证器来检查验证，我们也可以根据需要创建自定义验证器，并可用于验证（ngControl）。如果我们要创建模型驱动的表单，即我们必须使用

newcontrol（）

为每个输入创建新控件。 对照组、对照组和验证参考本最佳文章

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

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。我已经提到了它们的值和验证器（默认验证）

类端的代码在这里

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

class DemoInfo{
  name:string;
  password: string;
  radio: any;
  select: any;
}
@Component({
    selector: 'my-app',
    templateUrl: 'mytemplate.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] 
})
export class AppComponent { 
  CreateGroup: FormBuilder;
  demoInfo: DemoInfo;
  constructor(fb: FormBuilder){
    this.demoInfo= new DemoInfo(); 
    
    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)
        })
  }
  addNewGroup(demoInfo:demoInfo) {
    console.log(demoInfo, 'whole object');
    this.demoInfo= new DemoInfo();
  }
}

请参阅此以了解工作情况。

已更新-ANGULAR2 RC4表格 （新表格中有如此多的变化，因此发布为新答案）

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指令

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

• 创建

  FormGroup

• 使用

  验证器

  进行验证

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

• 组：构建一个新的表单组
• 数组：构建一个新的表单数组
• 控件：构造一个新的表单控件

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

angular2表格的可用资源：

现场演示同样在这里

---

这篇文章是我读过的关于这个主题的最好的文章。它涵盖了您需要了解的关于angular2表单的所有信息。这本书也很好。是的，我已经看过这篇文章了，但是这篇文章没有包括我正在寻找的部分，包括收音机和复选框。您知道如何从收音机和复选框中获取我在问题中解释的值吗？我们将非常感谢您的帮助。可能会帮助您无法启动form.ts。我必须更改gulpfile，对吗？我还想获得radioButton和checkbox的值，这在您的回购协议中没有提到。我完全搞不懂如何使用ngControl获取radio和checkbox的值。希望您能帮助我您混淆了b/t ngFormModel和基于模板的表单的概念。您在模板中使用了“required”，但如果您使用的是ngFormModel和控件，则不应使用该选项。FWIW我仍然在寻找如何正确地使用单选按钮…我认为唯一知道如何使用单选按钮的人是那些写单选按钮的人。。。他们没有时间向我们解释莫特

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

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

  <div class="col-md-7">
    Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'>
  </div>
  
  <div class="col-md-7">
    Password:   <input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password'>
  </div>
   
  <div class="col-md-7">
    <input type="radio" name='type' (click)='demoInfo.radio="Btech"' [checked]="'Btech' === demoInfo.radio">Btech
    <input type="radio" name='type' (click)='demoInfo.radio="Mtech"' [checked]="'Mtech' === demoInfo.radio">Mtech
  </div>
  
  <div class="col-md-7">
    <select #selectOption (change)='demoInfo.select=selectOption.value' class='form-control' ngControl='select'>
      <option> select</option>
      <option value='One' [selected]="demoInfo.select==='One'">One Value</option>
      <option value='Two' [selected]="demoInfo.select==='Two'">two Value</option>
      <option value='Three' [selected]="demoInfo.select==='Three'">Three Value</option>
    </select>
  </div>
</form>
<br>
<div class='text-center'>
  <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button>
</div>

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

class DemoInfo{
  name:string;
  password: string;
  radio: any;
  select: any;
}
@Component({
    selector: 'my-app',
    templateUrl: 'mytemplate.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] 
})
export class AppComponent { 
  CreateGroup: FormBuilder;
  demoInfo: DemoInfo;
  constructor(fb: FormBuilder){
    this.demoInfo= new DemoInfo(); 
    
    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)
        })
  }
  addNewGroup(demoInfo:demoInfo) {
    console.log(demoInfo, 'whole object');
    this.demoInfo= new DemoInfo();
  }
}

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