Angular2 Form Validation Inside Component

Question

モデル入力フォームの検証をカスタム入力コンポーネントに追加する必要があります。 ngControlを私のコンポーネントに渡して実装する方法がわかりません。

は私のplunkr例で作業している最初の二つの入力タグがhttp://plnkr.co/edit/QTmxl8ij5Z6E3xKh45hI?p=previewありますし、最初の二つの入力と同じことを行う必要がありmy-form-inputがありますが、ここではカスタムコンポーネント

 <form [ngFormModel]="loginForm"> 
     <p> 
      <input type="text" ngControl="usernameX" required placeholder="usernameX" /><br> 
      valid {{usernameX.valid}} 
     </p> 
     <p> 
      <input type="text" ngControl="passwordX" required placeholder="passwordX"/><br> 
      valid {{passwordX.valid}} 
     </p> 

     <my-form-input [placeholder]="'usernameXX'" [required]="true" [control]="usernameXX"></my-form-input><br> 
     valid {{usernameXX.valid}} 

     <p>form is valid: {{loginForm.valid}}</p> 
     </form> 

を使用することですコントロールおよび妥当性確認と私のコンポーネント

@Component({ 
    selector: 'my-form-input', 
    directives: [ FORM_DIRECTIVES ], 
    template: ` 
    <div> 
     <p> 
     <input type="text" [attr.placeholder]="placeholder" [attr.required]="required" [attr.ngControl]="control"/><br> 
     valid {{control.valid}} 
     </p> 
    </div> 
    ` 
}) 
export class InputComponent implements OnInit { 

    @Input() placeholder: string; 
    @Input() required: boolean; 
    @Input() control: Control; 

THX

Answer 1

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 here を操作するためにこれを参照してください。詳細については

は

• Forms In angular2 Beta