验证表格按最小长度，最大长度，电子邮件，数量，要求等。角度2

Question

我有一个角形的样本表格

app.html

<form [ngFormModel]="newListingForm" (ngSubmit)="submitListing(newListingForm.value)">

<input type="radio" #typeRadio="ngForm" [ngFormControl]="newListingForm.controls['typeRadio']" value="Event" id="type-event_radio" required>

<input type="radio" #typeRadio="ngForm" [ngFormControl]="newListingForm.controls['typeRadio']" value="Venue" id="type-venue_radio" required>

<input type="text" placeholder="New Title" #mainTitleInput="ngForm" [ngFormControl]="newListingForm.controls['mainTitleInput']" id="main-title_input" class="transparent">

<input type="email" #emailAddressInput="ngForm" [ngFormControl]="newListingForm.controls['emailAddressInput']" id="email-address_input" required>

<!-- etc -->

</form>

app.ts

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common';

@Component({
  templateUrl : 'app/components/new-listing/app.html',
  directives: [FORM_DIRECTIVES]
})

export class NewListingComponent {

  //Helpers
  newListingForm: ControlGroup;

  //Costructor
  constructor(
    fb: FormBuilder
  ){

    //New Listing Form
    this.newListingForm = fb.group({
      'typeRadio': ['', Validators.required],
      'mainTitleInput': ['', Validators.required],
      'emailAddressInput': ['', Validators.required],
    });
  }

  //TODO Form submission
  submitListing(value: string): void {
    console.log("Form Submited");
  }

}

目前只有我看到的验证是谷歌在必填字段提供的默认验证。一切都消失了。我一直在研究文档和最小/最大长度似乎很容易实现我当前的设置，但有另一个有趣的asp NG_VALIDATORS我认为（不确定）提供验证通过查看像type="email"，required等。在表格内。基本上我希望能够通过angular2显示invalid email this field is required等消息。

Answer 1

只需使用这样的表达式（带Bootstrap的示例）来利用与输入关联的控件的属性（有效与否，错误，...）：

<form [ngFormModel]="newListingForm">

  <!-- Field name -->
  <div class="form-group form-group-sm"
       [ngClass]="{'has-error':!newListingForm.controls.mainTitleInput.valid}">
    <label for="for"
       class="col-sm-3 control-label">Name:</label>

    <div class="col-sm-8">
      <input [ngFormControl]="newListingForm.controls.mainTitleInput"
             [(ngModel)]="newListing.mainTitleInput"/>
      <span *ngIf="!newListingForm.controls.mainTitleInput.valid"
            class="help-block text-danger">
        <span *ngIf="newListingForm.controls.errors?.required">
          The field is required
        </span>
      </span>
    </div>
  </div>

</form>

使用此示例，带有错误的字段将以红色显示，并且会动态显示错误消息。

此外，您为您的字段添加工具自定义验证器：

export class CityValidator {
  static validate(control: Control) {
    var validValues = [ 'mycity', ... ];

    var cnt = validValues
      .filter(item => item == control.value)
      .length; 

    return (cnt == 0) ? { city: true } : null;
  }
}

只需将其添加到字段的验证器中：

this.newListingForm = fb.group({
  'myfield': ['', Validators.compose([
     Validators.required, CityValidator.validate])]
  (...)
});

希望它对你有帮助，蒂埃里

Answer 2

@Ilja你正处于良好的轨道，用这个改进你的代码：

this.newListingForm = fb.group({
  'typeRadio': ['',  Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(40)])],
  'mainTitleInput': ['', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(40)])],
  'emailAddressInput': ['', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(40)])],
});

考虑这个例子（使用自定义电子邮件Validator）https://plnkr.co/edit/5yO4HviXD7xIgMQQ8WKs?p=info