NG-Zorro Date picker日历不显示及表单按钮无法启用问题求助

问题1：nz-date-picker日历图标不显示 #

• 确认模块中已导入NG-Zorro的图标模块及日期选择器模块：
  在组件所属的NgModule中，需要导入NzDatePickerModule和NzIconModule，并注册日历图标：

  import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
  import { NzIconModule } from 'ng-zorro-antd/icon';
  import { CalendarOutline } from '@ant-design/icons-angular/icons';
  
  @NgModule({
    imports: [
      // 其他必要模块
      NzDatePickerModule,
      NzIconModule.forRoot([CalendarOutline])
    ]
  })
  export class ActivityModule {}
  

• 检查全局样式是否引入NG-Zorro样式文件：
  在angular.json的styles数组中添加NG-Zorro CSS文件，确保图标样式能正常加载：

  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
    "src/styles.scss"
  ]
  

问题2：提交按钮无法点击（表单始终处于invalid状态） #

问题根源是日期字段被设置为必填项，但你希望允许跳过该字段。需要修改表单控件的验证规则：

1. 在组件类中，修改activityForm的FormGroup定义，移除日期字段的Validators.required：

   import { FormBuilder, FormGroup, Validators } from '@angular/forms';
   
   export class ActivityComponent {
     activityForm: FormGroup;
   
     constructor(private fb: FormBuilder) {}
   
     ngOnInit(): void {
       this.activityForm = this.fb.group({
         caloriesBurned: [null, [Validators.required, Validators.pattern(/^\d+$/)]], // 限制为数字输入
         distance: [null, [Validators.required]],
         steps: [null, [Validators.required]],
         date: [null] // 移除必填验证，允许空值
       });
     }
   }
   

2. 同时建议给caloriesBurned添加数字格式验证，避免用户输入非数字内容导致表单无效。

另外，模板中日期字段的nzErrorTip可以保留，但只有当字段被触摸且为空时才会提示，如果不需要提示可以直接删除该属性。

内容的提问来源于stack exchange，提问作者Martin Máté Hajc