如何验证角形，具有材料形场？

Question

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

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

问题

当我在template和component中实现FormsBuilder或表单组时，物料组件将无法正确显示。

问题

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

谢谢。

Answer 1

您应该首先将字段设为 insertIcon: function (string) { const myicon = instance.$mount() const myiconhtml = myicon.$el.innerHTML return string.replace('icon', myiconhtml) } 的一部分，就像这样：

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"> ：

FormControl

请注意，<input matInput placeholder="name" formControlName="cNameControl"> 周围没有[，因为我们使用的是字符串文字

最后，更改您的formControlName标签，以使该表单在无效有效的情况下被禁用：

disabled

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

Here is a StackBlitz demo