模型值不会自动以角度2修剪 [英] model values not trim automatically in angular 2

问题描述

我正在使用角度2表单验证，我在文本框中设置了所需的验证，当我在文本框中未输入任何内容时，它会显示所需的错误消息，但是没问题，但是当我仅输入空格时，它不会显示所需的错误消息，这意味着角度2不会修剪模型值.

I am using angular 2 form validation, I set required validation on text box, when I enter nothing into textbox it shows required error message it is ok but when I enter only spaces then it does not show required error message, which means angular 2 not trim the model values.

在angular 1.x中，它会自动修剪模型值，但是在angular 2中，我看不到此功能.

In angular 1.x it automatically trims the model values but in angular 2 I don't see this feature.

推荐答案

嗯，有一个 long在github 上进行讨论，结果如下:我们必须实现自己的验证器.

Well, there is a long discussion on github with the following result: we must implement our own validators.

这是我到目前为止使用的:

This is what I use so far:

import { ValidatorFn, AsyncValidatorFn, Validators as V, FormControl } from '@angular/forms';

// the need in this validators is the non-trimming angular standard behavior
// see https://github.com/angular/angular/issues/8503
export class Validators {

  public static required(control: FormControl) {
    if (!control.value || typeof control.value === 'string' && !control.value.trim()) {
      return {
        required: true
      };
    }

    return null;
  }

  public static minLength(length: number): ValidatorFn {
    return (control: FormControl) => {
      if (!control.value || typeof control.value === 'string' && control.value.trim().length < length) {
        return {
          minlength: true
        };
      }

      return null;
    };
  }

  public static maxLength(length: number): ValidatorFn {
    return (control: FormControl) => {
      if (control.value && typeof control.value === 'string' && control.value.trim().length > length) {
        return {
          maxlength: true
        };
      }

      return null;
    };
  }

  public static pattern(pattern: string): ValidatorFn {
    return V.pattern(pattern);
  }

  public static minAmount(amount: number): ValidatorFn {
    return (control: FormControl) => {
      if (control.value && control.value.length < amount) {
        return {
          minamount: true
        };
      }

      return null;
    };
  }

  public static maxAmount(amount: number): ValidatorFn {
    return (control: FormControl) => {
      if (control.value && control.value.length > amount) {
        return {
          maxamount: true
        };
      }

      return null;
    };
  }

  public static compose(validators: ValidatorFn[]): ValidatorFn {
    return V.compose(validators);
  }

  public static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn {
    return V.composeAsync(validators);
  }

};

这模仿了字符串输入的标准maxLength，minLength和required验证，但具有修整功能，并将其他功能代理到标准功能.

This mimics the standard maxLength, minLength and required validations for string input but with trimming and proxies other functions to the standard ones.

要使用它，只需导入您的验证器而不是@angular/forms，例如:

To use it just import your Validators instead of @angular/forms one, e.g.:

import { FormControl } from '@angular/forms';
import { Validators } from 'path/to/validators';

...
let control = new FormControl('', Validators.compose(
  Validators.required, Validators.minLength(6)
));
...

这可能不会修剪模型，但它解决了请求中指定的验证问题.

This maybe does not trim the model but it solves the validation problem specified in the request.

这篇关于模型值不会自动以角度2修剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！