6

angular2 ベータ版でフォーム (テンプレートまたはモーダル駆動のフォーム) を使用する方法について少し混乱しました。

現在、私はモーダル駆動フォームを使用していますが、ここでエラーが発生するのは私の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:- この例では、ラジオ ボタンとチェック ボックスの値を取得できません。何か間違ったことをしているのですか。この例では、モーダル駆動のフォームです。

良い参照や例は大歓迎です。ありがとう。

4

5 に答える 5

6

angular2のFORMに関連するいくつかのポイントをクリアしたので、回答として投稿すると誰かに役立つかもしれません!!

いつ ngControl を使用し、いつ ngModel を使用するのですか?

基本的に、フォームの値を取得するためと検証のために ngControl を使用できますが、このメソッドを使用するいくつかの問題があるためngModel、フォームの値をクラスに取得するために使用ngControlし、検証目的で使用するのが最善の解決策です。必要に応じてカスタム バリデータを作成し、バリデーション (ngControl) で使用できるバリデーションをチェックするために angular によって提供されるデフォルトのバリデータがあります。モデル駆動フォームを作成する場合、つまり を使用してすべての入力に対して新しいコントロールを作成する必要がありますnew Control()。コントロール、コントロール グループ、および検証については、このベスト アーティクルを参照してください

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 という名前の 3 つの入力があります。対応する値とバリデーター (デフォルトの検証) について言及しました。

<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 の動作については、こちらを参照してください。

于 2016-02-27T18:31:59.657 に答える