FooterToolbar
IMPORT MODULE

A toolbar fixed at the bottom.

Usage

It is fixed at the bottom of the content area and does not move along with the scroll bar, which is usually used for data collection and submission for long pages.

Examples

基础

浮动固定页脚,常用于表单页。

expand codeexpand code
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'components-footer-toolbar-basic',
  template: `
    <form nz-form [formGroup]="form">
      <nz-form-item>
        <nz-form-control [nzValidateStatus]="name">
          <input nz-input formControlName="name" placeholder="required" />
        </nz-form-control>
      </nz-form-item>
      <footer-toolbar errorCollect extra="This is extra area">
        <button nz-button nzType="primary">Submit</button>
      </footer-toolbar>
    </form>
  `
})
export class ComponentsFooterToolbarBasicComponent implements OnInit {
  form = new FormGroup({
    name: new FormControl(null, [Validators.required])
  });

  get name(): FormControl<string | null> {
    return this.form.controls.name;
  }

  ngOnInit(): void {
    this.name.markAsDirty();
  }
}

API

PropertyDescriptionTypeDefault
ng-contenttoolbar content, align to the right--
[errorCollect]Whether error-collect, make sure to wrap inside the <form> elementbooleanfalse
[extra]extra information, align to the leftstring,TemplateRef<void>-