形式在angular2

Question

有点混淆如何在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));
    }
}

所以,我的问题是:

1. 哪种形式是最好的模板或模态驱动,为什么？
2. 何时使用ngControl以及何时使用ngModal？

PS: - 在这个例子中,我无法得到单选按钮和复选框的值,我做错了,在这个例子中我是模态驱动形式从这里？

任何好的参考或例子都是受欢迎的.谢谢.

Answer 1

我猜你的ngModl是指ngModel.

"1 - 哪种形式是最好的模板或模态驱动,为什么？"

来自: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.

Answer 2

已经清除了与angular2中的FORM相关的一些点,所以发布作为答案可能对某人有帮助!!

何时使用ngControl以及何时使用ngModel？

基本上我们可以使用ngControl来获取表单的值以及验证,但是有一些问题使用这种方法,所以最好的解决方案是根据我的用途ngModel来获取表单的值到您的类并ngControl用于验证目的.有一些默认验证器通过angular提供检查验证,我们也可以根据需要创建我们的自定义验证器,并可以在验证(ngControl)中使用.如果我们要创建模型驱动形式,即我们必须通过使用为每个输入创建新的控件new Control().对于控制,对照组和验证参考这个最好的artical

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

这是使用窗体控件的基本示例:

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的输入.并且我已经提到了他们的值和验证器(默认验证).

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

这是我们如何定义ngControl到HTML方面.

带控件和验证的Angular2 FORM.

经过大量搜索后,我得出结论,使用ngModel最好从表单中获取值.通过使用它,更容易清除窗体的控件.和验证变得容易.并用于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>

和班级的代码在这里......

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

在这里提到这个工作plunkr .