Angular2 Form Validasyonu İç Bileşen

Question

Özel giriş bileşenime model sürücü form doğrulaması eklemem gerekiyor. Bileşenime ngControl geçişini nasıl uygulayacağımı bilmiyorum.

benim plunkr örnekte çalışıyoruz ilk iki giriş etiket vardır ve daha sonra ilk iki girdi olarak aynı şeyi yapması gerektiğini my-form-input yoktur, ama burada

 <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> 

olan özel bir bileşenini kullanarak http://plnkr.co/edit/QTmxl8ij5Z6E3xKh45hI?p=preview benim bileşeni

@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

kontroller ve doğrulama ile

Answer 1

Angular2 FORMU sadece bir fikir.

Çok fazla arama yaptıktan sonra ngModel'in kullanılmasının formdan değer elde etmek için en iyisi olduğu sonucuna vardım. Aynı kullanarak formların kontrollerini temizlemek daha kolaydır. ve doğrulamalar kolaylaşır. ve doğrulamaları kontrol etmek için ngControl kullanılır.

Burada form için çalışma kodum var. sınıf tarafı için

<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> 

ve kod

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 çalışmak için bu bakın ... burada. Daha fazla ayrıntı için

• Forms In angular2 Beta