Question

我正在努力使用默认的角形式验证器。我有一个带有单个输入字段和一个提交按钮的表单。现在，当输入字段为空时，该按钮也被禁用（由于验证器）。但是当我在场中输入内容时，我无法直接按下按钮，我首先会失去对输入字段的关注。我该如何改变这种行为？

先谢谢

编辑：

我有两个文件：

example.form.ts
example.form.template.html

代码：

在.ts文件中，我使用formbuilder构建了一个表单：

import pandas as pd
import numpy as np
from numpy.lib.stride_tricks import as_strided as stride

v = df.values
n, m = v.shape
s1, s2 = v.strides

# note that `np.nanmean` is used to address potential nan values
pd.DataFrame(
    np.nanmean(stride(v, (n - 9, 10, m), (s1, s1, s2)), 1).round(),
    df.index[9:], df.columns
)

              A     B     C
1/10/2000  44.0  41.0  58.0
1/11/2000  42.0  43.0  56.0
1/12/2000  44.0  37.0  56.0
1/13/2000  42.0  43.0  49.0
1/14/2000  48.0  48.0  46.0
1/15/2000  43.0  48.0  53.0
1/16/2000  45.0  52.0  54.0
1/17/2000  46.0  59.0  58.0
1/18/2000  42.0  62.0  54.0

模板：

exampleForm: Formgroup
constructor(protected pb: Formbuilder){
  this.exampleForm = fb.group({
    name: ['', Validators.required]
  });
}

get isFormValid: boolean {
  return this.exampleForm.valid;
}

Answer 1

只要输入被聚焦，表单验证就会失败，因为只要表单知道字段没有被填充。

解决方法是不使用验证方法。如果您唯一关心的是输入字段不为空，您可以执行以下操作：

<form [formGroup]="exampleForm">
  <input type="text" formControlName="name" [(ngModel)]="someName">
  <button type="submit" [disabled]="someName==''" id="save-button">Submit</button>
</form>

现在只有在字段为空时才会禁用该按钮。对于更复杂的逻辑（例如一些正则表达式），您应该构建自定义验证方法。例如：

  isValidEmail(): ValidatorFn {
    return (control: FormControl): string[] => {
      if (!control || !control.value || control.value == "")
        return null;
      if (this.regexService.email.test(control.value))
        return null;

      return ["Invalid email"]
    };
  }

在formBuilder中初始化validate方法

  initFormGroup() {
    this.authenticateForm = this.formBuilder.group(
      {
        email: ['',
          this.isValidEmail()
        ],        
      }
    );
  }

Angular 2需要验证

1 个答案: