修改 nz-form-item 的样式

修改 nz-form-item 的样式

问题

使用 nz-form-item 时发现该元素的样式有一个 margin-bottom,想自定义此数值

解决

在组件的样式文件中添加:

:host {
  ::ng-deep {
    .ant-form-item {
      margin-bottom: 0px;
    }
  }
}

:host 表示在当前组件,::ng-deep 表示修改内部样式

参考

https://blog.csdn.net/qq_36671474/article/details/88191973

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 TypeScript 编写上述表单时,你可以这样写: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-search-form', templateUrl: './search-form.component.html', styleUrls: ['./search-form.component.css'] }) export class SearchFormComponent { q = { ajmc: '', ajbh: '', }; onSubmit() { // 处理表单提交事件 } onReset() { this.q.ajmc = ''; this.q.ajbh = ''; } } ``` 在这个例子中,我们使用了 Angular 框架来构建组件。在组件类中,我们定义了一个 `q` 对象来存储表单中的数据。当提交表单时,我们可以在 `onSubmit` 方法中处理表单提交事件,当重置表单时,我们可以在 `onReset` 方法中将 `q` 对象中的属性值设置为空字符串,从而实现表单重置的功能。 在 HTML 文件中,你可以这样写: ```html <form nz-form [nzLayout]="'inline'" class="search-form" (ngSubmit)="onSubmit()"> <nz-row> <nz-col> <nz-form-item> <nz-form-label>  案件名称</nz-form-label> <nz-form-control> <nz-input-group> <input nz-input width="200px" [(ngModel)]="q.ajmc" name="ajmc" placeholder="请输入案件名称"> </nz-input-group> </nz-form-control> </nz-form-item> </nz-col> <nz-col> <nz-form-item> <nz-form-label>案件编号</nz-form-label> <nz-form-control> <nz-input-group> <input nz-input width="200px" [(ngModel)]="q.ajbh" name="ajbh" placeholder="请输入案件编号"> </nz-input-group> </nz-form-control> </nz-form-item> </nz-col> <nz-col> <button style="margin-top: 3px;" nz-button type="submit" [nzType]="'primary'">查询</button> <button nz-button type="button" class="mx-sm" (click)="onReset()">重置</button> </nz-col> </nz-row> </form> ``` 在这个例子中,我们使用 `(ngSubmit)` 指令来监听表单的提交事件,并在事件发生时调用组件类中的 `onSubmit` 方法。在重置按钮中,我们使用 `(click)` 指令来监听按钮的点击事件,并在事件发生时调用组件类中的 `onReset` 方法。注意,重置按钮的类型应该为 `type="button"`,这样可以避免表单的提交事件被触发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值