Question

我正在验证一个按计划工作的有角项目中的表单。但是，当特定文本字段noWards中的值小于1

时，我试图通过禁用表单来走得更远

文本框

  <input autocomplete="off" class="input100" type="text"   formControlName="noWards" [(ngModel)]="noWards" >

按钮

    <button
    [disabled]="!questionsForm.valid || noWards.length < 3"
    [ngClass]="{'default':!questionsForm.valid}"
    (click)="goToNextStep()" class="contact100-form-btn">
      <span>
        Start
        <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
      </span>
    </button>

JS

  this.questionsForm = this.formBuilder.group({
            new: ['', Validators.required],
            noWards: ['', Validators.required],
            user: [''],
            pass: ['', Validators.required]
          });

Answer 1

相反，您可以禁用 inputs表单，实际上，这不是一个好的策略，因为恶意用户可以从DOM覆盖此类属性。

因此，更好的方法是删除输入表单并将任何 content标签（{{1}，public get_api(path: 'user'): Observable<User> public get_api<T>(path: string) : Observable<T> public get_api<T>(path: string) : Observable<T> { return this.http.get<T>(API_ENDPOINT + path); } this.http_global.get_api<Interface>('other').subscribe(.....=>); this.http_global.get_api<('user').subscribe(.....=>); // Observable<User> 、. ..）。

示例：

<span>

Answer 2

您可以通过(ngModelChange)事件来做到这一点：

HTML代码：

<form [formGroup]="questionsForm">
    <input autocomplete="off" class="input100" type="text"   formControlName="noWards" [(ngModel)]="noWards" (ngModelChange)="isValid(noWards)" required>
<button
    [disabled]="!questionsForm.valid || isInputValid === false"
    (click)="goToNextStep()" class="contact100-form-btn">
    Test
    </button>
 </form>

在TS中：

添加一个属性：

isInputValid: boolean = false;

isValid()为：

isValid(data) {
    var valid = /^([0-9]*[1-9][0-9]*)$/.test(data);
    if (valid) {
      this.isInputValid = true
    }
    else {
      this.isInputValid = false;
    }
  }

[disabled]属性条件：

[disabled]="!questionsForm.valid || isInputValid === false"

Working Stackblitz Example

Answer 3

如果您谈论的是string length字段的noYards，您可以像这样通过Validator或Reactive Form Module使用来自Validators.minLength()的{{1}}类：

Validators.maxLength()

但是，如果您要谈论字段的类型this.questionsForm = this.formBuilder.group({ new: ['', Validators.required], noWards: ['', Validators.minLength(1)], user: [''], pass: ['', Validators.required] });，则可以实现number并将其传递给Custom Validation function，如下所示：

FormControl

然后在您的import { AbstractControl } from '@angular/forms'; export function ValidateNoYards(control: AbstractControl) { if (control.value < 1) { return { validNoYards: false }; } return true; }中使用它：

Component

这应该有效。

Answer 4

在使用反应式表单时，应使用自定义验证程序来验证字段。

此外，您可以在输入字段中使用type="number"，以确保仅在该字段中输入数字。

在ts文件中，创建自定义验证器函数，如下所示：

  validatenoWards(control: FormControl) {
    if (control.value<1) {
      return { inValid: true };
    }
    return null;
  }

如果控制值有效，则自定义验证器应返回null，否则应返回上述函数中的任何对象。然后在表单组中，将其用作：

this.questionsForm = this.formBuilder.group({
            new: ['', Validators.required],
            noWards: ['', [this.validatenoWards,Validators.required]]],
            user: [''],
            pass: ['', Validators.required]
          });

然后在noWards小于1时使按钮保持禁用状态，只需使用如下所示的表单有效条件的disable属性：

<button
    [disabled]="!questionsForm.valid"
    (click)="goToNextStep()" class="contact100-form-btn">
    Test
    </button>

您可以在定制验证器中执行任何逻辑，以检查输入字段是否有效。您还可以根据有效性显示自定义消息。有关自定义验证器的更多信息，请参见：Creating a Custom Validator。

angular4-输入为空或值小于1时禁用表格

4 个答案:

`Validators.maxLength()`