Form.valid 在 Angular 中不工作

Question

我正在尝试使用验证表单的所有组件 'formName'.valid 在打字稿中。

我想验证 "home form's all the fields" 。在这里我创建输入字段并使用验证器进行验证。如果表单有效 "Home Form is valid" 应该弹出警报，如果不是 "Home Form is invalid" 应该弹出。

else 部分 ("Home Form is invalid") 在表单无效时起作用。但是 if 部分（“Home Form is valid”）在表单有效时不起作用。

我在构造函数中写了下面的代码。

如何解决这个问题？

if (this.homeForm.valid) {
  alert("Home Form is valid");
}

else {
 alert("Home Form is invalid");
}

Source Code-StackBlitz

Answer 1

您忘记将输入字段连接到表单控件。所以写：

<input formControlName="homeName" type="text" class="form-control" placeholder="Home">

在你的表单中，你会没事的。

Answer 2

你的代码有错误，首先你没有添加 formControlName 并且没有正确关闭你的标签，所以这个：

<input type="text" class="form-control" placeholder="Home" <br> 应该是

<input type="text" class="form-control" placeholder="homeName" formControlName="homeName">

这将使验证工作，另一件事是您的构造函数警报仅调用一次，要修复它，您可以执行以下操作：

在你的 app.components.ts

constructor(private homeFB: FormBuilder) {

    this.homeForm = this.homeFB.group({
      homeName: ['', [Validators.required]],
    });
    this.onChanges(); 
  }
  onChanges(): void { 
    this.homeForm.valueChanges.subscribe(val => {
    if (this.homeForm.valid) {
      alert("Home Form is valid");
    } else {
      alert("Home Form is invalid");
    }
    });
  }

希望这对您有所帮助。这是 link 到您的 example updated

Form.valid 在 Angular 中不工作

Form.valid is not working in Angular

javascript

angular

angular-reactive-forms