angular - 如何验证具有材料形式字段的角度形式？

Question

我有一个使用 Angular 材料表单字段的表单。我想禁用提交按钮，直到所有表单控件都填充了适当的值。（代码在描述中作为链接给出）

当我在模板（代码）中使用材质组件并在组件中定义控件（代码）时，这就是输出。

问题

当我在template和component中实现 formsBuilder 或 forms group 时，材料组件将无法正确显示。

问题

仅当所有材料表单字段都被评估为 true时，我如何才能禁用/启用提交按钮

提前致谢。

Answer 1

您应该首先使您的字段成为 a 的一部分FormGroup，如下所示：

group = new FormGroup({
  cNameControl: new FormControl('', [Validators.required, Validators.minLength(3)]),
  cDescControl: new FormControl('', [Validators.required])
})

您现在可以将form标签指向您的表单组：

<form class="example-container" #addCategoryForm="ngForm"  [formGroup]="group">

并将您的控件指向FormControls：

<input matInput placeholder="name" formControlName="cNameControl">

请注意，没有[环绕formControlName，因为我们使用的是字符串文字

最后，更改您的disabled标签，以便在表单无效时将其禁用：

[disabled]="!addCategoryForm.valid"

结合所有这些，它应该可以工作。

这是一个 StackBlitz 演示