Angular 2 需要验证答案

【问题标题】：Angular 2 required validationAngular 2 需要验证
【发布时间】：2017-02-06 07:32:36
【问题描述】：

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

在此致谢

编辑：

我有两个文件：

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

代码：

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

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

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

模板：

<form [formGroup]="exampleForm">
  <input type="text" formControlName="name">
  <button type="submit" [disabled]="!isFormValid" id="save-button">Submit</button>
</form>

【问题讨论】：

“我不能直接按下按钮”是什么意思？为什么不能？
@GünterZöchbauer 如果焦点仍在输入字段上，则按钮被禁用，因此我无法按下按钮进行汇总。我首先必须在字段外单击以验证是否输入了某些内容，然后我才能按下现在启用的按钮。
会不会是因为在构造函数中声明了pb并使用了fb？

标签： forms angular typescript

【解决方案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()
        ],        
      }
    );
  }

【讨论】：