如何验证具有 material 表单字段的 angular 表单？

Question

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

当我在组件中使用 material components in template(code), and define controls(code) 时，这是输出。

问题

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

问题

只有当所有 material 表单字段都评估为 true

时，我才能 disable/enable 提交按钮

提前致谢。

Answer 1

您应该首先让您的字段成为 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"

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

Here is a StackBlitz demo

如何验证具有 material 表单字段的 angular 表单？

How to validate angular form, having material form field?

angular-material

angular

angular-material-6

问题

问题