组件内部的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;

谢谢

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