MaxLength数量不起作用 [英] MaxLength on number not working

问题描述

我使用angular 4.3.3

i using angular 4.3.3

maxlength 11最大跨度消息未显示

maxlength 11 max span message is not showing

<input type="number" class="form-control" id="orderId"   [(ngModel)]="orderIdModel"  name="orderId" #orderId="ngModel" required  maxLength="11"  />
<div *ngIf="orderId.errors">
                    <span *ngIf="orderId.errors.required"class="not-valid">required</span>
                    <span *ngIf="orderId.errors.maxlength"class="not-valid"> 11 max</span>
    </div> 

推荐答案

我认为你需要使用 max 而不是

max="99999999999"

另见如何限制HTML5number中的可能输入？元素？

See also How can I limit possible inputs in a HTML5 "number" element?

min 和 max 默认情况下仅适用于模型驱动的表单。

min and max are only available for model-driven forms by default.

我创建了一个指令，使 max 通过从 maxLength 验证器的来源，可用于模板驱动的表单fcadbf4bf6d00ea5b250a8069e05b3e4bd000a29 / packages / forms / src / directives / validators.tsrel =nofollow noreferrer> https://github.com/angular/angular/blob/fcadbf4bf6d00ea5b250a8069e05b3e4bd000a29/packages/forms/src/directives/validators.ts

I created a directive that makes max available to template-driven forms, by copying and adapting the source of the maxLength validator from https://github.com/angular/angular/blob/fcadbf4bf6d00ea5b250a8069e05b3e4bd000a29/packages/forms/src/directives/validators.ts

Plunker示例

import {Component, NgModule, VERSION, Directive, forwardRef, Input} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule, Validators, NG_VALIDATORS} from '@angular/forms'

export const MAX_VALIDATOR: any = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => MaxValidator),
  multi: true
}

@Directive({
  selector: '[max][formControlName],[max][formControl],[max][ngModel]',
  providers: [MAX_VALIDATOR],
  host: {'[attr.max]': 'max ? max : null'}
})
export class MaxValidator implements Validator,
    OnChanges {
  private _validator: ValidatorFn;
  private _onChange: () => void;

  @Input() max: string;

  ngOnChanges(changes: SimpleChanges): void {
    if ('max' in changes) {
      this._createValidator();
      if (this._onChange) this._onChange();
    }
  }

  validate(c: AbstractControl): ValidationErrors|null {
    return this.max != null ? this._validator(c) : null;
  }

  registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }

  private _createValidator(): void {
    this._validator = Validators.max(parseInt(this.max, 10));
  }
}

@Component({
  selector: 'my-app',
  template: `
    <form #orderId="ngForm" ngForm>
      <input type="number" class="form-control" id="orderId"
          [(ngModel)]="orderIdModel"  name="orderId" #orderId="ngModel" required min="10" max="999"  />
          <div>errors: {{orderId.errors | json}} </div>
      <div *ngIf="orderId.errors">
        <span *ngIf="orderId.errors.required"class="not-valid">required</span>
        <span *ngIf="orderId.errors.max"class="not-valid"> 11 max</span>
      </div> 
    </form>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App, MaxValidator ],
  bootstrap: [ App ]
})
export class AppModule {}

这篇关于MaxLength数量不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！