如何将输入大小限制为一定的长度，并且不允许使用反应形式进一步的角度字符？答案

【问题标题】：how to restrict the input size to certain length and not allow further chars in angular using reactive form?如何将输入大小限制为一定的长度，并且不允许使用反应形式进一步的角度字符？
【发布时间】：2021-04-28 13:25:51
【问题描述】：

我需要将输入字段的长度限制为10，并且不允许字段中包含更多字符，而不抛出验证消息。它应该简单地停止使用更多字符，你能帮我吗我不想使用maxlength = 10

html:

<div class="col col-4">
{{ EditAddressContext.streetNumber }}:
<p>
<input type="text" name="streetNumber" formControlName="streetNumber" [ngClass]="{'is-invalid': submitted && streetNumberError}" />
<small class="form-text text-danger" *ngIf="submitted && streetNumberError">
<small class="form-text text-danger" *ngIf="streetNumberError">
<small *ngFor="let error of streetNumberErrorArray">{{error}}<br></small>
</small>
</small>
</p>
</div>

.ts 文件：

formGeneration() {
    this.interceptEditAddressFormGroup = this._formBuilder.group({      
      streetNumber: ['', [Validators.maxLength(11)]],
      streetPrefix: [],
      streetName: ['',],
      streetSuffix: [],
      streetType: [],
      roomSuite: []
    });
  }

【问题讨论】：

如果你希望输入被阻塞，最好的解决方案是 HTML 的 maxlength 属性。没有错误消息，因为不可能写更多的字符...另一个解决方案是通过 JS 阻止用户输入，但丑陋且防错性较差...

标签： angular angular-reactive-forms

【解决方案1】：

我建议你创建一个自定义指令：

@Directive({
  selector: '[appMaxLength]'
})
export class MaxLengthDirective {

  constructor(private readonly formControl: FormControlName) {}

  @HostListener('keyup', ['$event'])
  onKeyUp(event): void {
    const value = this.formControl.value;

    if (value.length > 10) {
      event.preventDefault();
    }
  }

}

将其添加到带有 formControlName 的字段中：

<input type="text" appMaxLength formControlName="nameIt">

【讨论】：

【解决方案2】：

您想使用掩码。这允许您定义输入中的预期内容。

我建议你使用这个库：ngx-mask

【讨论】：