如何在角度 2 中验证输入类型 =“文本”最大长度问题答案

【问题标题】：How to validate input type="text" maxlength issue in angular 2如何在角度 2 中验证输入类型 =“文本”最大长度问题
【发布时间】：2018-07-30 17:40:00
【问题描述】：

我的要求是在输入字段超过最大长度时显示最大长度错误消息。

这适用于输入类型编号。如果输入字段超过最大长度，则会显示错误消息。

这不适用于输入类型的文本字段。没有显示错误消息，而是限制用户输入超过给定最大长度的值。

谁能建议我解决这个问题。

谢谢你， Java4you.

【问题讨论】：

请在您的问题中添加一些代码。
我认为字符串长度有些什么但不确定

标签： angular angular2-forms angular2-directives

【解决方案1】：

我建议使用ReactiveForms 并将验证器设置为最大长度。

在你的模块中：

import { ReactiveFormsModule } from '@angular/forms'
...
@NgModule({
   imports: [
       ...
       ReactiveFormsModule
   ]
   .....
})

然后转到您的组件并注入表单构建器

import { FormBuilder } from '@angular/forms';
...
export class MyFormComponent {
   public fb: FormGroup;
   public constructor(private formBuilder: FormBuilder) {
       this.fb = this.formBuilder.group({
           myControlWithMaxLength: ['', Validators.maxLength(128)]
       });
   }
}

现在在您的模板中执行以下操作

<form [formGroup]="fb" novalidate>
   <input type="text" formControlName="myControlWithMaxLength" />
   <span *ngIf="fb.controls['myControlWithMaxLength'].hasError('maxLength')">Max length is 128!</span>
</form>

为了保持模板更简洁，您可以在组件中编写 getter。

【讨论】：

我没有使用表单来验证我的输入字段。我的输入字段是单独的，不在表单提交中
然后我建议您将当前的实现更改为使用响应式表单或模型驱动表单。当有一个系统为您完成时，这不是手动验证内容的好方法。