web-dev-qa-db-ja.com

Angular2 Forms：検証、ngControl、ngModelなど

Angle2ベータFormsに取り組んでいます。多くの検索の後、有用なものは見つかりませんでした。ここで誰かが私を助けることを願っています。

基本的に、angular2のフォームを適切な方法で使用する方法（つまり、ngControl、ngFormControlなどを使用する）は少し混乱しています。ここにplnkrを1つ作成しました

http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview

ここに私の.htmlコードがあります：-

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

  <div class="col-md-7">
Name: <input type="text" id="name" placeholder="Name" class="form-control" ngControl="name">
  </div>
  <div class="col-md-7">
  Password:   <input type="text" id="password" placeholder="password" class="form-control" ngControl="password">
  </div>

  <div class="col-md-7">
    <input type="radio" name='type'>Btech
    <input type="radio" name='type'>Mtech
  </div>

  <div class="col-md-7">
    <input type="checkbox" >Math
    <input type="checkbox">English
    <input type="checkbox">Science
  </div>
  <br>
  <div class="col-md-7">
    <select #selectOption (change)='getValue(selectOption.value)' class='form-control'>
      <option value='1'>One Value</option>
      <option value='2'>two Value</option>
      <option value='3'>Three Value</option>
    </select>
  </div>
</form>
<button type="button" (click)="addNewGroup(CreateGroup.value)" class="btn btn-primary btn-lg"> Create </button>

および.tsコードは次のとおりです。

CreateGroup: FormBuilder;
  constructor(fb: FormBuilder){
    console.log('form called');

    this.CreateGroup = fb.group({
            'name': new Control(),
            'password': new Control()
        })
  }
  addNewGroup(value) {
    console.log(value);
    document.getElementById("myForm").reset();
  }

  getValue(value){
    console.log(value);
  }

完全なフォームからオブジェクトとして値を取得する方法を理解できません。私のフォームには、テキストボックス、チェックボックス、ラジオ、選択オプションが含まれています。今ここに私の質問のいくつかがあります。

Q1：-ラジオ、チェックボックス、angular2のフォームを使用して選択の値を取得する方法。 （plnkrで使用した選択オプションのchangeフックを呼び出したくない）。

Q2：-データフォームコントロールを送信した後のplnkrのようにリセットされていません。フォームの制御は存在したままですが、フォームはリセットされたようです。したがって、angular2のフォームの制御をリセットする方法。

Q3：-フォームで検証を使用する最良の方法は何ですか（検証を示すplnkrをお持ちの場合は投稿してください）。

私はフォームに関するこの記事を読みましたが、ラジオのチェックボックスと選択オプションではまだ成功しませんでした。

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

angularformsvalidationangular-validation
12
Pardeep Jain

ドメインモデルへのフォームコントロールのバインド

コンポーネント内でドメインモデルを初期化します。

constructor(){
  this.student = new Student();
}

ngModelを使用して、フォームコントロールをドメインモデルに双方向モデルバインドでバインドします。

Name: <input [(ngModel)]="student.name" type="text">
Password:  <input [(ngModel)]="student.password" type="text">

ボタンがクリックされたら、ドメインモデルを引数として渡します。

<button type="button" (click)="addNewGroup(student)">Create</button>

addNewGroupメソッドを実装します。フォームをリセットするには、新しいモデルでドメインモデルを更新します。

addNewGroup(student:Student) {
  alert('added ' + student.name);
  this.student = new Student();
}

デモPlnkr

バリデーターをフォームに追加する

フォーム検証を追加するには、ngFormModelをフォーム要素に追加し、ngControlデコレータを各入力要素に追加します（ngControlは[ngFormControl]="studentForm.controls['name']"の構文シュガーです）。

<form [ngFormModel]="studentForm" />
   <input type="text" ngControl="name" />
   <input type="text" ngControl="password" />
</form>

ngFormModelは、コンポーネントのControlGroupプロパティにマップします。プロパティ名がControlGroup属性の値に対応する構成オブジェクトでngControlを初期化します。

constructor(fb: FormBuilder){
  this.student = new Student();
  this.studentForm = fb.group({
     'name': new Control(this.student.name, Validators.required),
     'password': new Control(this.student.password, Validators.required)
  });
}

上記の例では、組み込みのrequiredバリデーターを使用して、名前とパスワードが必須フィールドであることを示しています。その後、フォームモデルのvalidプロパティを使用して、フォーム全体が有効かどうかを確認できます。

addNewGroup(student:Student) {
    if (this.studentForm.valid) {
      alert('added ' + student.name);
      this.student = new Student();
    }
    else {
      alert('form is not valid!');
    }
}

デモPlnkr

検証メッセージの表示

ビュー内の検証メッセージにバインドする場合は、コントロールをローカルテンプレート変数としてエクスポートし、その検証プロパティにアクセスできます。valid、dirty、pending、pristine、errorsオブジェクトです。

 <input ngControl="name" #name="ngForm" type="text">
 <span [hidden]="name.valid"><b>Required</b></span>

デモPlnkr

独自のカスタムバリデータを作成する場合は、booleanプロパティが検証エラーに対応する検証オブジェクトを返すメソッドを作成します。たとえば、パスワードの最初の文字が数字でなければならないことを保証するバリデーターを作成できます。

interface ValidationResult {
 [key:string]:boolean;
}
class PasswordValidator {
 static startsWithNumber(control: Control): ValidationResult { 
   if ( control.value && control.value.length > 0){
     if (isNaN(control.value[0]))
      return { 'startsWithNumber': true };
   }

   return null;
 } 
}

バリデーターを1つのバリデーターにまとめ、組み込みのValidators.composeを使用してControlコンストラクターに渡します。

this.studentForm = fb.group({
   'name': new Control(this.student.name, Validators.required),
   'password': new Control(this.student.password, Validators.compose([Validators.required,PasswordValidator.startsWithNumber])),
});

同じControlに複数のバリデーターがある場合、errorsオブジェクトを使用してそれらを区別します。

<input ngControl="password" #password="ngForm" />
<span [hidden]="!password.control.hasError('required')"><b>Required</b></span>
<span [hidden]="!password.control.hasError('startsWithNumber')"><b>Must start with number</b></span>

デモPlnkr

ラジオボタンリストへのバインド

Angular2では、ラジオボタンリストにバインドする組み込みのサポートはまだありません。これを行う方法については、この投稿を確認してください。

Angular2-ラジオボタンバインディング

26
pixelbits

更新済み-Angular2 RC4の形式

TL; DR;

Angle2 RC Formsのリリース後、angular2 formには多くの変更が加えられました。それらのいくつかは重大な重大な変更であり、それらのいくつかは無視できます。ここに、angular2フォームを使用するための重要なポイントがあります。

基本的にAngular 2でフォームを構築する2つの方法があります。すなわち、テンプレート駆動型とモデル駆動型です。

  • 実行npm install @angular/forms --save

  • configure bootstrap=アプリのメソッドは次のとおりです。

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

  • 使用する REACTIVE_FORM_DIRECTIVESフォーム機能を使用するコンポーネントディレクティブ。

  • タイプFormGroupのフォーム変数を作成します
  • 検証のためにValidatorsを使用します。

これとは別にFormBuilderはモデル駆動型フォームの構築に必須ではありませんが、構文を簡素化します。 formbuilderによって提供される3つの基本的な構文/メソッドがあります：

  • group：新しいフォームグループを構築します。
  • array：新しいフォーム配列を作成します。
  • control：新しいフォームコントロールを作成します。

これらは、angular2 RCでフォームを使用するための基本的な手順です。

Angular2フォームの便利なリソース：

こちらのライブデモ

Working Demo for angular2 Forms

4
Pardeep Jain