形式angular2 Beta版 [英] Forms In angular2 Beta
问题描述
有点困惑如何在angular2测试使用表单（模板或模式驱动320交织）。</ P>
目前我使用模式驱动的形式，但在这里收到的一些错误是我form.html：
＆LT;形成[ngFormModel] =演示＆GT;
＆LT;输入类型=文本[ngFormControl] =demo.controls ['名']＆GT;
＆LT;输入类型=文本[ngFormControl] =demo.controls ['批']＆GT;
＆LT; DIV＆GT;
＆LT;输入类型=无线电[ngFormControl] =demo.controls ['无线电']NAME =状态值=真＆GT;活性
＆LT;输入类型=无线电[ngFormControl] =demo.controls ['无线电']NAME =状态值=假＆GT;无效
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;输入类型=复选框[ngFormControl] =demo.controls ['复选框']NAME =一值=一＆GT;一
＆LT;输入类型=复选框[ngFormControl] =demo.controls ['复选框']NAME =两会值=两化＆GT;二
＆LT; / DIV＆GT;
＆LT;选择[ngFormControl] =demo.controls ['选择']＆GT;
＆LT;期权价值=一＆GT; Oone＆LT; /选项＆GT;
＆LT;期权价值=两化＆GT;二＆LT; /选项＆GT;
＆LT;期权价值=三＆GT;三＆LT; /选项＆GT;
＆LT;期权价值=四个一＆GT;四＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;按钮式=按钮级=BTN BTN-主要BTN-LG数据解雇=模式（点击）=demoSubmit（demo.value）＆GT;完成＆LT; /按钮＆GT;
＆LT; /表及GT;
和form.ts文件是在这里：
进口{组件，查看}从'angular2 /核心;
进口{FORM_DIRECTIVES，CORE_DIRECTIVES，FormBuilder，控制ControlGroup}从'angular2 /通用';
从angular2 /路由器的进口{ROUTER_DIRECTIVES};@零件（{
selectro：表，
templateUrl：'SRC /组件/表格/ form.html'，
指令：[CORE_DIRECTIVES，FORM_DIRECTIVES]
}）
出口类FormDemo {
演示：ControlGroup;
构造函数（FB：FormBuilder）{
的console.log（窗体调用）; this.demo = fb.group（{
名称：pardeep]，
批：[]，
复选框：[]，
电台：[]，
选择： []
}）
}
demoSubmit（）{
的console.log（JSON.stringify（this.demo.value））;
}
}
所以，我的问题是：
- 哪种形式最好的模板或模式驱动，为什么？
- 时使用ngControl以及何时使用ngModal？
PS： - 在这个例子中，我无法得到单选按钮的价值观和检查中选择我做得不对，在这个例子中我模式驱动形成了从的这里？
任何很好的参考或示例是值得欢迎的。
谢谢。
清除了有关在angular2形式张贴这样的回答一些问题可以帮助别人！
时使用ngControl以及何时使用ngModel？
基本上，我们可以ngControl为获得形式价值观以及对验证，但也有一些probelms使用这种方法，所以最好的解决办法是根据我使用 ngModel 的获取形式的值到类，并使用 ngControl 为验证目的。有默认验证通过角提供查询验证我们可以创建自定义的太根据需要，可在验证（ngControl）使用。如果我们要创建模型驱动的形式即我们必须使用新控件创建每个输入新的控制（）。
为控制，对照组和验证是指这个最佳ARTICAL
http://blog.ng -book.com/the-ultimate-guide-to-forms-in-angular-2/
下面是一个使用控件形式的基本的例子：
this.CreateGroup = fb.group（{
'名'，新的控制（this.demoInfo.name，Validators.required）
密码：新的控制（this.demoInfo.password，Validators.required）
选择：新的控制（this.demoInfo.select，Validators.required）
}）
在这里，我有一个名为名，密码三个输入，分别选择。和相应的我刚才提到他们的价值观和验证器（默认的验证）。
＆LT;输入类型=文本[（ngModel）] ='demoInfo.name'ngControl ='名字'＆GT;
下面是我们如何定义ngControl到了HTML端。
Angular2形式控制和验证。
经过大量的搜索我的结论是，使用ngModel最好从形式获取值。通过使用相同的比较容易以清除的形式的控制。和验证变得容易。并用 ngControl 检查验证。
这是我的工作code的形式。
＆LT;窗体类=形横的id ='myForm的'角色=形式[ngFormModel] =CreateGroup＆GT; ＆LT; DIV CLASS =COL-MD-7＆GT;
名称：＆LT;输入类型=文本[（ngModel）] ='demoInfo.name级=表格控ngControl ='名'＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =COL-MD-7＆GT;
密码：LT;输入类型=密码[（ngModel）] ='demoInfo.password级=表格控ngControl ='密码'＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =COL-MD-7＆GT;
＆LT;输入类型=电台NAME =类型（点击）='demoInfo.radio =BTECH[检查] ='BTECH'=== demoInfo.radio＆GT; BTECH
＆LT;输入类型=电台NAME =类型（点击）='demoInfo.radio =MTECH[检查] ='MTECH'=== demoInfo.radio＆GT; MTECH
＆LT; / DIV＆GT; ＆LT; DIV CLASS =COL-MD-7＆GT;
＆LT;选择#selectOption（其他城市）='demoInfo.select = selectOption.value'类='的形式控制'ngControl ='选择'＆GT;
＆LT;选项＆GT;选择＆LT; /选项＆GT;
＆LT;期权价值='一'[选择] =demoInfo.select ==='一' - 酮价值与LT; /选项＆GT;
＆LT;期权价值=两课[选择] =demoInfo.select ==='两个'＆GT;二是价值与LT; /选项＆GT;
＆LT;期权价值='三'[选择] =demoInfo.select ==='三'＆GT;三是价值与LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; BR＆GT;
＆LT; DIV CLASS ='文本中心'＆GT;
＆LT;按钮式=按钮[禁用] ='！CreateGroup.valid（点击）=addNewGroup（demoInfo）级=BTN BTN-小学＆GT;创建＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
和code该类方是在这里...
进口{}组件从angular2 /核心;
进口{CORE_DIRECTIVES，NgClass，FORM_DIRECTIVES，控制ControlGroup，FormBuilder，校验}从'angular2 /通用';类DemoInfo {
名称：字符串;
密码：字符串;
电台：任何;
选择：任意;
}
@零件（{
选择：我的应用，
templateUrl：mytemplate.html'，
指令：[CORE_DIRECTIVES，FORM_DIRECTIVES]
}）
出口类AppComponent {
CreateGroup：FormBuilder;
demoInfo：DemoInfo;
构造函数（FB：FormBuilder）{
this.demoInfo =新DemoInfo（）; this.CreateGroup = fb.group（{
'名'，新的控制（this.demoInfo.name，Validators.required）
密码：新的控制（this.demoInfo.password，Validators.required）
选择：新的控制（this.demoInfo.select，Validators.required）
}）
}
addNewGroup（demoInfo：demoInfo）{
的console.log（demoInfo，整个对象'）;
this.demoInfo =新DemoInfo（）;
}
}
这是指对工作 plunkr这里
。
Bit confused about how to use Forms(template or modal driven froms) in the angular2 beta.
currently i am using modal driven forms but getting some error here is my 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>
and form.ts file is here:
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));
}
}
so, my questions is:
- which form is best template or modal driven and why ?
- when to use ngControl and when to use ngModal ?
PS:- in this example i am unable to get the values of radio button and check-box selected am i doing something wrong, in this example i am modal driven form From here?
any good reference or example is welcome. thanks.
Got cleared some points related to FORMs in angular2 so posting as answer may help to someone !!
when to use ngControl and when to use ngModel ?
Basically we can ngControl for both to get values of forms as well as for validations but there are some probelms using this methods so best solution is according to me use ngModel for getting values of the form into your class and use ngControl for the validation purpose. there are default validators provide by angular to check validation we can create our custom one too as per need and can use in the validation (ngControl). if we are going to create model driven form i.e we have to create new control for every input by using new Control().
for the Control, control group and validation refer this best artical
http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
here is the basic example of using controls for the form:
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)
})
Here i have three inputs named name, password,select respectively. and corresponding i have mentioned their values and validators (default validation).
<input type="text" [(ngModel)]='demoInfo.name' ngControl='name'>
here is how we define ngControl to out HTML side.
Angular2 FORM with controls and validation.
After a lot searching i concluded that using ngModel is best to get values from form. by using same it is easier to clear to controls of the forms. and validations gets easy. and used ngControl for checking validations.
here is my working code for the form.
<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>
and code for the class side is here...
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();
}
}
refer this for working plunkr here .
这篇关于形式angular2 Beta版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
