带控件和验证的Angular2 FORM。

Question

我需要将模型驱动器表单验证添加到我的自定义输入组件。我不确定如何实现它将patch传递给我的组件。

在我的plunkr示例private Date getThisMonthFirstDate(){ Calendar calendar = new GregorianCalendar(); calendar.set(Calendar.HOUR_OF_DAY, 0); calendar.set(Calendar.MINUTE, 0); calendar.set(Calendar.SECOND, 0); calendar.set(Calendar.MILLISECOND, 0); calendar.set(Calendar.DAY_OF_MONTH, 1); return calendar.getTime(); } private Date getThisMonthLastDate(){ Calendar calandar = new GregorianCalendar(); calendar.set(Calendar.HOUR_OF_DAY, 0); calendar.set(Calendar.MINUTE, 0); calendar.set(Calendar.SECOND, 0); calendar.set(Calendar.MILLISECOND, 0); calendar.set(Calendar.DAY_OF_MONTH,1); calendar.add(Calendar.MONTH, 1); calendar.add(Calendar.DATE, -1); return calendar.getTime(); }中，前两个输入标记正在工作，然后有ngControl，它应该与前两个输入做同样的事情，但使用自定义组件

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

这里只是我的组件的想法

my-form-input

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();
  }
}

请参阅此作品https://stackoverflow.com/a/32268633/6124253。

有关详细信息，请参阅此处

plunkr here

组件内的Angular2表单验证

1 个答案:

带控件和验证的Angular2 FORM。