1.表单(FormBuilder与FormGroup)
1.1 初始化
import { FormBuilder, FormGroup, Validators } from '@angular/forms' ;
export class FormTestComponent implements OnInit {
form: FormGroup;
constructor (
private fb: FormBuilder
) { }
ngOnInit ( ) : void {
this . form = this . fb. group ( {
id: [ null , [ ] ] ,
name: [ null , [ Validators. required] ] ,
gender: [ null , [ Validators. required] ] ,
address: [ null , [ Validators. maxLength ( 128 ) ] ] ,
...
age: [ null , [ ] ]
} ) ;
}
}
< form nz-form [formGroup] = " form" >
< nz-form-item class = " mb-sm ant-row ant-form-item" >
< nz-form-label nzSpan = " 3" nzRequired nzFor = " name" > 姓名</ nz-form-label>
< nz-form-control nzSpan = " 9" >
< input nz-input formControlName = " name" >
</ nz-form-control>
< nz-form-label nzSpan = " 3" nzFor = " gender" > 性别</ nz-form-label>
< nz-form-control nzSpan = " 9" >
< input nz-input formControlName = " gender" >
</ nz-form-control>
</ nz-form-item>
< nz-form-item class = " mb-sm ant-row ant-form-item" >
< nz-form-label nzSpan = " 3" nzRequired nzFor = " age" > 年龄</ nz-form-label>
< nz-form-control nzSpan = " 9" >
< input nz-input formControlName = " age" >
</ nz-form-control>
< nz-form-label nzSpan = " 3" nzFor = " address" > 住址</ nz-form-label>
< nz-form-control nzSpan = " 9" >
< input nz-input formControlName = " address" >
</ nz-form-control>
</ nz-form-item>
</ form>
1.2 保存
save ( ) {
const _this_ = this ;
let record = { } ;
for ( const i in _this_. form. controls) {
if ( _this_. form. controls. hasOwnProperty ( i) ) {
_this_. form. controls[ i] . markAsDirty ( ) ;
_this_. form. controls[ i] . updateValueAndValidity ( ) ;
}
}
if ( _this_. form. invalid) return ;
record = Object. assign ( record, _this_. form. value) ;
}
< button nz-button nzType = " primary" type = " button" (click) = " save()" >
< i class = " anticon anticon-save" > </ i> 保存
</ button>
1.3 赋值与取值
this . form. patchValue ( { 'name' : 'user1' } ) ;
this . form. setControl ( 'name' , this . fb. control ( 'user1' , [ ] ) ) ;
1.4 自定义校验
同步验证器返回{}表示验证不通过null表示验证通过
this . form. setControl ( 'name' , this . fb. control ( 'user1' , [ this . nameValidate ( ) ] ) ) ;
nameValidate ( ) : ValidatorFn {
return ( control: FormControl) : { [ key: string ] : any } => {
if ( control. value === 'user1' ) return { 'nameInvalid' : { msg: '非法的姓名' } } ;
return null ;
} ;
}
< nz-form-label nzSpan = " 3" nzRequired nzFor = " name" > 姓名</ nz-form-label>
< nz-form-control nzSpan = " 9" >
< input nz-input formControlName = " name" >
</ nz-form-control>
< nz-form-explain *ngIf = " form.get(' name' ).dirty && form.get(' name' ).hasError(' required' )" >
请填写姓名
</ nz-form-explain>
< nz-form-explain *ngIf = " form.get(' name' ).hasError(' nameInvalid' )" >
{{form.get('type').errors['nameInvalid'].msg}}
</ nz-form-explain>
异步验证器返回Promise或Obzervable对象,回调中的值为null时表示验证通过,但是有些小问题,可以考虑使用valueChanges
const nameField = this . form. get ( 'name' ) ;
nameField. valueChanges. filter ( val => val. length >= 4 ) . debounceTime ( 500 )
. switchMap ( value => this . userService. CheckUserExist ( ) ) . subscribe ( ( r: OpResult) => {
if ( xxx) {
nameField. setErrors ( { 'nameExist' : { msg: '姓名已存在' } } ) ;
}
} ) ;
2.上传文件(nz-upload)
< nz-upload
[nzAction] = " uploadUrl"
[nzMultiple] = " true"
[nzCustomRequest] = " uploadCustomRequest"
[nzFileList] = " fileList"
[nzBeforeUpload] = " beforeUpload"
[nzAccept] = " ' image/png,image/jpg,image/jpeg,image/tiff,image/bmp' "
>
< button nz-button nzType = " primary" type = " button" >
< i class = " anticon anticon-upload" > </ i> 上传
</ button>
</ nz-upload>
import { HttpClient, HttpEvent, HttpEventType, HttpRequest, HttpResponse } from '@angular/common/http' ;
uploadUrl = '' ;
fileList = [ ] ;
2.1 beforeUpload的用法
beforeUpload = ( file: any , fileList: any [ ] ) : any => {
this . fileList = this . fileList. concat ( file) ;
if ( this . fileList. length !== fileList. length) return false ;
}
2.2 nzCustomRequest的用法
uploadCustomRequest = ( item: UploadXHRArgs) => {
const _this_ = this ;
const formData = new FormData ( ) ;
_this_. fileList. forEach ( fileItem => {
formData. append ( 'file' , fileItem as any ) ;
} ) ;
const req = new HttpRequest ( 'POST' , this . uploadUrl, formData, {
reportProgress: true ,
withCredentials: true
} ) ;
return _this_. http. request ( req) . subscribe ( ( event: HttpEvent< { } > ) => {
if ( event. type === HttpEventType. UploadProgress) {
if ( event. total! > 0 ) {
( event as any ) . percent = ( event. loaded / event. total! ) * 100 ;
}
item. onProgress! ( event, item. file! ) ;
} else if ( event instanceof HttpResponse ) {
_this_. fileList = [ ] ;
item. onSuccess! ( event. body, item. file! , event) ;
}
} ,
err => {
_this_. fileList = [ ] ;
item. onError! ( err, item. file! ) ;
} ) ;
} ;