Question

按照这里的例子：

https://angular.io/docs/ts/latest/guide/forms.html

我的表单如下：

<input type="text" class="form-control" id="name"
               required
               [(ngModel)]="model.name" name="name"
               #name="ngModel" >
        <div [hidden]="name.valid || name.pristine" 
             class="alert alert-danger">

我想为此表单添加一些自定义验证。我确实找到了一些关于使用ngFormModel和FormBuilders和Validation类的建议，不过我相信这些已经过时了，不再推荐了

（http://almerosteyn.com/2016/03/angular2-form-validation-component）

我的问题是如何添加自定义验证。

在angular 1.x中，我曾经将函数添加到ngModel。$ parsers和ngModel。$ formatters管道。角度2中的等价物是什么？

Answer 1

尝试一下：

import { CustomValidators } from 'ng2-validation';

ngOnInit() {
   const Email = new FormControl('', [Validators.required, CustomValidators.email]);
}

Answer 2

尝试使用Reactive Forms

AppModul.ts

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

App.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

App.component.html

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

Answer 3

我是通过使用模型驱动的方法而不是模板驱动的方法来实现的。例如：

<强>表格

<form [formGroup]="myForm">
    <label for="id-name">Name</label>
    <input type="text" id="id-name" formControlName="name">
    <label for="id-age">Age</label>
    <input type="text" id="id-age" formControlName="age">
</form>

<强>组件

export class MyComponent implements OnInit {
    myForm:FormGroup;

    ngOnInit() {
        let fuv = FormUtils.validators;

        this.myForm = this.formBuilder.group({
            name: ['', Validators.required],
            age: ['', [Validators.required, fuv.isNumber]],
        });
    }
}

<强> FormUtils

type ValidatorResult = {[key:string]:any};

function _isNumber(control:AbstractControl):ValidatorResult {
    let v = control.value;
    if (isPresent(v) && !isNumber(v) && !isEmptyString(v)) {
        return {'isNumber': false};
    }
    return null;
}

export class FormUtils {
      static validators = {
        isNumber: _isNumber
      }
}

此处，isPresent，isNumber和isEmptyString非常简单：

isPresent(obj) --> return obj !== undefined && obj !== null;
isNumber(obj) --> return (typeof obj === 'number' && !isNaN(obj));
isEmptyString(obj) --> return obj === '';

目前，Angular 2为您提供了四个有用的验证器：required，minLength，maxLength和pattern。最后一个非常强大。您可以按照与上面_isNumber类似的模式编写自己的验证器。如果验证者需要参数（例如lessThan），那么您可以使用与此类似的模式：

function lessThan(maxVal:number):ValidatorFn {
    return (control:AbstractControl):ValidatorResult => {
        let value = control.value;

        if (isPresent(value) && !isEmptyString(value) && isNumber(value) && parseInt(value) >= maxValue) {
            return {'lessThan': {'maxValue': maxValue, 'actual': value}};
        }

        return null;
    };
}

我理解这种方法（模型驱动）与您在问题中发布的形式（模板驱动）不同。无论如何，我希望它有所帮助。

Angular2表格中的自定义验证

3 个答案: