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

<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>

View Code

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();
  }

 

 

 

 

 

 

 

 

 

 

 

 

 

100