javascript - ng-maxlength 不起作用

Question

我有一个 Angular 4 应用程序。我正在尝试向表单输入添加验证，其中带有数字的输入不应接受超过 4 位数字。如果超过，则该表格无效。我正在使用 react 形式。这是代码。

<input class="form-control form-control-amount no-z-index"
     id="forNumber"
     name="forNumber"
     formControlName="forNumber"
     ng-required="true"
     type="number"
     ng-maxlength="4" 
     [(ngModel)]="saveNumber"
    [attr.disabled]="!condition? 'disabled': null "
    #forNumber
  >  

<small class="alert alert-danger" *ngIf="!form.get('forNumber').valid">
      Invalid input.
 </small>

如果我输入 11111，它应该使该条目无效，并且应该打印上面的警报消息；但这并没有发生。知道这里出了什么问题吗？谢谢。

Answer 1

首先，您不要同时使用 ngModel 和 formControlName。我不知道 ViewChild 引用，也不知道你用它做什么，但如果它只是为了获取值，那么你也不需要它。

其次，ng-是AngularJS，而不是Angular。

第三，您需要向您的控件添加一个验证器。

<input class="form-control form-control-amount no-z-index"
  id="forNumber"
  name="forNumber"
  formControlName="forNumber"
  ng-required="true"
  type="number"
  maxlength="4" 
  [attr.disabled]="!condition? 'disabled': null "
>

现在，在您的 TS 中添加验证器

constructor(private FB: FormBuilder) {
  this.myForm = FB.group({
    forNumber: ['', [Validators.maxLength(4)]]
  });
}