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

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

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

因此，更好的方法是删除输入表单 ，并将任何内容标签 （ <span> ， <p> ，...）添加到DOM。

例：

<input *ngIf="isEditable" type="text" ... [(ngModel)]="Name">
<span *ngIf="!isEditable"> {{Name}} </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"

工作Stackblitz示例

Answer 3

如果您在谈论字段noYards的string length ，则可以通过Validators.minLength()或Validators.maxLength()使用来自Reactive Form Module的Validator类，如下所示：

 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使用它：

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

这应该工作。

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的情况下使按钮保持禁用noWards ，只需使用表单有效条件的disable属性，如下所示：

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

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