angularjs – 组件内的Angular2表单验证

2023年4月19日 178次阅读

我需要将模型驱动器表单验证添加到我的自定义输入组件.

我不确定如何实现它将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;

谢谢

最佳答案 带控件和验证的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

点赞