Misalignment of form fields while using angular formly with ng-zorro ant design

[codebanesr]

Template

<form [formGroup]="validateForm" (ngSubmit)="submitForm()" class="leadCreateForm" nz-form>
  <formly-form nz-form [form]="validateForm" [model]="model" [fields]="fields">
  </formly-form>

  <button nz-button nzType="primary" type="submit">
    Submit
  </button>
  <button nz-button nzType="danger" type="reset">
    Reset
  </button>
</form>

This is not what ant design forms normally would look like, for example my forms elsewhere look like

Is there a way to fix this issue, i know ng zorro uses directives for this. Any help would be appreciated

[aitboudad]

horizontal layout not supported yet, for now, rely on vertical layout which can be done by importing NzFormModule and passing vertical to nzLayout input:

+ import { NzFormModule } from 'ng-zorro-antd/form';

@NgModule({
  imports: [
+   NzFormModule,
    ...
  ],
})
export class AppModule {}

<form
+ nz-form [nzLayout]="'vertical'"
  [formGroup]="form" (ngSubmit)="onSubmit()"
>
...
</form>

[codebanesr]

Thanks @aitboudad

[alvarolb]

I would set vertical alignment by default, as it is how it looks by default with other UIs. Is it viable?