对于如何在angular2 beta中使用Forms（模板或模态驱动的froms）感到困惑。
目前我正在使用模态驱动的表单但是在这里得到一些错误是我的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>
和form.ts文件在这里：
import {Component, View} from 'angular2/core';
import {FORM_DIRECTIVES, CORE_DIRECTIVES, FormBuilder, Control, ControlGroup} from 'angular2/common';
import {ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
selectro: 'Form',
templateUrl: 'src/components/form/form.html',
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
})
export class FormDemo{
demo:ControlGroup;
constructor(fb:FormBuilder){
console.log("Form Called");
this.demo= fb.group({
name: ["pardeep"],
batch: [],
checkbox: [],
radio: [],
select: []
})
}
demoSubmit (){
console.log(JSON.stringify(this.demo.value));
}
}
所以，我的问题是：
PS： - 在这个例子中，我无法获取单选按钮和复选框的值，如果我做错了，在这个例子中，我是模态驱动形式来自here？
欢迎任何好的参考或例子。 感谢。
答案 0 :(得分：7)
我猜测，通过ngModal你的意思是ngModel。
＆＃34; 1-哪种形式是最好的模板或模态驱动，为什么？＆＃34;
来自：http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
要创建新的ControlGroup和Controls，请隐式使用：
ngForm和ngControl
要绑定到现有的ControlGroup和Controls，请使用：
ngFormModel和ngFormControl
基本上一个更方便，但是你控制较少，我个人尝试首先使用模板驱动，因为它更简单，代码更少，直到它还不够，然后我切换到模型驱动。
2-何时使用ngControl以及何时使用ngModel？
我不知道你是否在这里混合概念，但ngControl和ngModel并不准确相互替换，ngModel处理输入组件和域/表示模型之间的同步，而ngControl处理表单的状态基于Validators，输入的肮脏等，更倾向于提供反馈并允许/阻止用户提交无效表单。
可以互相替换的是我之前在答案1中提到的那个。
我希望这有助于澄清一点？
对于复选框和无线电的值，你只有ngFormControl，添加ngModel将它们的值映射到你的模型中。再次引用同一页面：
<input type="text" id="productNameInput" placeholder="Product Name" [ngFormControl]="myForm.find('productName')" [(ngModel)]="productName">
您可以看到他正在使用ngFormControl和ngModel。
答案 1 :(得分：6)
清除了与angular2中的FORM相关的一些点，所以发布回答可能对某人有帮助!!
基本上我们可以使用ngControl来获取表单的值以及验证，但是有一些问题使用这种方法，所以最好的解决方案是根据我使用<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<WebView
android:layout_width="match_parent"
android:layout_height="540dp"
android:id="@+id/webView"
android:layout_gravity="center_horizontal" />
<Button
android:layout_height="fill_parent"
android:layout_width="125dp"
android:text="Forward"
android:layout_gravity="center_horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stop"
android:id="@+id/button"
android:layout_gravity="center_horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:id="@+id/button2"
android:layout_gravity="center_horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:id="@+id/button3"
android:layout_gravity="center_horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="eft"
android:id="@+id/button4"
android:layout_gravity="center_horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cam0"
android:id="@+id/button5"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
来获取表单的值到你的类和使用ngModel进行验证。有一些默认验证器通过angular提供检查验证，我们也可以根据需要创建我们的自定义验证器，并可以在验证（ngControl）中使用。如果我们要创建模型驱动的形式，即我们必须使用ngControl为每个输入创建新的控件。
对于Control，对照组和验证参考这个最好的artical
http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
这是使用表单控件的基本示例：
new Control()这里我分别有三个名为name，password，select的输入。并且我已经提到了他们的值和验证器（默认验证）。
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)
})
这是我们如何将ngControl定义为HTML方面。
经过大量搜索后，我得出结论，使用ngModel最好从表单中获取值。通过使用它，更容易清除窗体的控件。和验证变得容易。并使用<input type="text" [(ngModel)]='demoInfo.name' ngControl='name'>
来检查验证。
这是表格的工作代码。
ngControl并且班级的代码在这里......
<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>
请参阅此作品plunkr here 。
答案 2 :(得分：2)
尝试在formbuilder中使用new RadioButtonState(boolean, string)。
离。
模板：
<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>
组件
// create the form as a colleciton of Controls
this.form = formBuilder.group({
disOrDat: formBuilder.group(
{
dis: [new RadioButtonState(true, 'dis')],
dat: [new RadioButtonState(false, 'dat')]
},
{
validator: this.disOrDatValidator
}
)
});
disOrDatValidator(group: ControlGroup) {
/* tslint:disable:no-string-literal */
if (group.controls['dis'].value !== group.controls['dat'].value) {
/* tsslint:enable:no-string-literal */
return false;
}
// return null means validation passed
return null;
}
doIt() {
// handle form submit
}
答案 3 :(得分：1)
（新形式有很多变化，所以发布为新答案）
在angular2 RC Form发布后，angular2形式发生了很多变化。其中有一些是主要的突破性变化，其中一些可以忽略不计，这里是使用angular2形式的一些关键点。
基本上有两种方法可以在Angular 2中构建表单，即模板驱动和模型驱动。 使用表格的基本结构如下： -
npm install @angular/forms --save 为您的应用配置bootstrap方法，如下所示：
bootstrap(AppComponent, [
disableDeprecatedForms(), // disable deprecated forms
provideForms(), // enable new forms module
]);
使用REACTIVE_FORM_DIRECTIVES组件指令来使用表单功能。
FormGroup Validators进行验证。这些是在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
此处的现场演示
答案 4 :(得分：-2)
我的选择是使用ngFormModel和ngControl，因为我们可以更轻松地收集表单数据并进行验证等。
有关更多详细信息，请参阅我的angular2-seeds项目