ng-maxlength 不工作

Question

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

<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)]]
  });
}

ng-maxlength 不工作

ng-maxlength not working

html

javascript

typescript

angular-validation

angular