angular中<nz-form-explain>的用法
时间: 2024-05-12 11:19:07 浏览: 167
浅谈angular4 ng-content 中隐藏的内容
<nz-form-explain>是ng-zorro-antd组件库中的一个表单提示组件,用于在表单项下方显示错误信息或提示信息。它的用法如下:
1. 导入组件
```typescript
import { NzFormExplainModule } from 'ng-zorro-antd/form/explain';
```
2. 在模板中使用
```html
<nz-form-item>
<nz-form-label>Name</nz-form-label>
<nz-form-control [nzErrorTip]="nameErrorTpl">
<input nz-input [(ngModel)]="name" name="name" required>
</nz-form-control>
<ng-template #nameErrorTpl>
<nz-form-explain *ngIf="name.invalid && (name.dirty || name.touched)">
Please input your name!
</nz-form-explain>
</ng-template>
</nz-form-item>
```
这里使用了ng-template来定义错误提示的内容,用#nameErrorTpl来引用它,然后在nz-form-control组件中使用[nzErrorTip]绑定。如果name表单项的状态为invalid并且dirty或touched,就会显示错误提示信息。
除了错误提示,<nz-form-explain>还可以用于显示其他类型的提示信息,比如成功提示、警告提示等。只需根据需要设置对应的样式即可。
阅读全文