angular 的一些用法

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);
    // TODO 保存操作
}

<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的用法

/**
 * 上传之前的操作
 * return false则不执行 nzCustomRequest
 * 第二个参数 fileList 为支持多选时选中的文件列表
 * 每选择一个文件都会触发一次 beforeUpload, 如果不返回false，则每个文件都需要上传一次，
 * 为了一次性上传多个文件，定义了一个 this.fileList 
 * 当所有文件都已经准备就绪，在最后一个文件添加到 fileList 中后，返回true，
 * 再触发 nzCustomRequest 执行上传操作
 */
beforeUpload = (file: any, fileList: any[]): any => {
   this.fileList = this.fileList.concat(file);
   // return false;
   if (this.fileList.length !== fileList.length) return false; 
}

2.2 nzCustomRequest的用法

uploadCustomRequest = (item: UploadXHRArgs) => {
    const _this_ = this;
    const formData = new FormData();
    // 把所有文件都放入form-data中
    _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;
        }
        // 处理上传进度条，必须指定 `percent` 属性来表示进度
        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!);
    });
};