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