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不工作

1 个答案: