Angular 身份验证控件
ng g c shared/identity-input
ng g c shared/area-list
1,添加领域对象
export enum IdentityType { IdCard = 0, Insurance, Passport, Militory, Other } export interface Address { provice: string, city: string, district: string, street?: string } export interface Identity { identityNo: string; identityType: IdentityType } export interface User { id?: string; email: string; name?: string; password?: string; avatar?: string; projectIds?: string[]; taskIds?: string[]; address?: Address; dateOfBirth?: string; identity?: Identity; }
2,身份输入UI template
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div> <mat-form-field> <mat-select placeholder="证件类型" (change)="onIdTypeChange($event.value)" [(ngModel)]="identity.identityType"> <mat-option *ngFor="let type of identityTypes" [value]="type.value"> {{ type.label }} </mat-option> </mat-select> </mat-form-field> </div> <div class="id-input"> <mat-form-field class="full-width"> <input matInput type="text" placeholder="证件号码" (change)="onIdNoChange($event.target.value)" [(ngModel)]="identity.identityNo" /> <mat-error>证件号码输入有误</mat-error> </mat-form-field> </div>
3, 身份类型和身份号码
private _idType = new Subject<IdentityType>(); private _idNo = new Subject<string>(); private _sub: Subscription; ngOnInit(): void { const idType$ = this.idType; const idNo$ = this.idNo; const val$ = combineLatest([idType$, idNo$]).pipe( map(([_type, _no]) => ({ identityType: _type, identityNo: _no })) ); this._sub = val$.subscribe(v => { this.identity = v; this.propagateChange(v); }); } onIdTypeChange(idType: IdentityType) { this._idType.next(idType); } onIdNoChange(idNo: string) { this._idNo.next(idNo); } private get idType(): Observable<IdentityType> { return this._idType.asObservable(); } private get idNo(): Observable<string> { return this._idNo.asObservable(); }
在UI中调用
1,在注册组件中新开一个tab使用
<mat-tab label="个人信息"> <div class="full-width"> <app-identity-input formControlName="identity"></app-identity-input> </div> <div class="full-width"> <app-age-input formControlName="dateOfBirth"></app-age-input> </div> <div class="full-width"> <app-area-list formControlName="address"></app-area-list> </div> </mat-tab>
2,希望输入身份证的时候同时改变出生日期和地址
自定义表单控件和普通表单控件一样,都可以通过valueChanges模式获得流。
const identity = this.form.get('identity'); if (!identity) { return; } const id$ = identity.valueChanges.pipe( debounceTime(300), //滤波 filter(v => identity.valid) //验证通过的时候才能把数据放出来 );
3,订阅流,从身份信息中读取出来有用的信息,比如生日和地址,把它set回其他两个控件。
100
如果觉得本文对您有帮助~可以
微信支持一下:![微信打赏](http://files.cnblogs.com/files/starof/starof_wx.bmp)