Angular的设计文件输入库 - ngx-material-file-input

Angular的设计文件输入库 - ngx-material-file-input
插件名称 ngx-material-file-input
发布时间 2020年5月23日
插件作者 merlosy

这个库提供了一个在Angular Material的 mat-form-field 内使用的组件,一个具有maxContentSize的FileValidator来限制文件的大小。ByteFormatPipe和ByteFormatPipe以人类可读的格式格式化文件大小。

安装:

# NPM
$ npm install ngx-material-file-input --save

MaterialFileInputModule

import { MaterialFileInputModule } from 'ngx-material-file-input';

@NgModule({
  imports: [
    MaterialFileInputModule
  ]
})

NGX_MAT_FILE_INPUT_CONFIG令牌(可选):
更改ByteFormat管道的单位

export const config: FileInputConfig = {
  sizeUnit: 'Octet'
};
providers: [{ provide: NGX_MAT_FILE_INPUT_CONFIG, useValue: config }];

FileInputComponent
选择器: <ngx-mat-file-input>
实现:来自Angular Material的MatFormFieldControl
附加属性

名称 描述
@Input() valuePlaceholder: string 文件名的占位符,默认为空
@Input() multiple: boolean false 默认情况下允许多个文件输入
@Input() autofilled: boolean 输入当前是否处于自动填充状态。如果控件上不存在属性,则假定它为false。
@Input() accept: string  accept 属性可以获取的任何值。
value: FileInput 表单控制值
empty: boolean 输入是否为空(无文件)
clear(): (event?) => void 从输入中删除所有文件

ByteFormatPipe

<span>{{ 104857600 | byteFormat }}</span>

输出: 100 MB

FileValidator

名称 描述 错误结构
maxContentSize(value:)numberValidatorFn 将文件总大小限制为给定值 { actualSize: number, maxSize: number }