Question

我正在尝试使用表单验证表单的所有组件类型脚本中的'formName'.valid。

我想验证“home form的所有字段”。在这里，我创建输入字段并使用验证器进行验证。如果表格有效“主页表格有效”，则应弹出警报，否则应弹出“主页表格无效”。

当表单无效时，else部分（“Home Form无效”）正在运行。但是当表格有效时，if部分（“主页表格有效”）不起作用。

我在构造函数中编写了以下代码。

如何解决这个问题？

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

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

Source Code-StackBlitz

Answer 1

您忘记将输入字段连接到formcontrol。所以写：

<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");
    }
    });
  }

希望这会帮助你。这是指向example updated

的链接

Form.valid在Angular中不起作用

2 个答案: