如何验证角形，具有材料形式字段？

提问于 2024-04-26T06:44:50+08:00

浏览次

0

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

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

问题

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

enter image description here

问题

如果全部 material forms fiields are evaluated to true ，我怎么能禁用/启用提交按钮

提前致谢 .

1 回答

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">
```
并将控件指向 FormControl ：
```
<input matInput placeholder="name" formControlName="cNameControl">
```
请注意，周围没有 [ formControlName ，因为我们使用的是字符串文字

最后，更改 disabled 标记，以便在表单为 not 有效时禁用它：
```
[disabled]="!addCategoryForm.valid"
```
综合这一切，它应该工作 .

Here is a StackBlitz demo
回复于 2024-04-26T06:44:50+08:00

相关问题