組件內的Angular2表單驗證

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形式控制和驗證。

經過大量的搜索後，我得出結論，使用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