0

我有一个 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 它应该使输入无效并且应该打印上面的警报消息；这没有发生。知道这里出了什么问题吗？谢谢。

4

1 回答 1

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)]]
  });
}
于 2017-12-13T07:47:01.687 回答