UI介面Layout測試

<h2>使用者資料ＵＩ測試</h2>
  <div class="card justify-content-center">
    <div class="field">
      <label class="p-2">IdUser:</label>
      <input type="text" pInputText [(ngModel)]="IdUser" />
    </div>
    <div class="field">
      <label class="p-2">Password:</label>
      <input type="text" pInputText [(ngModel)]="Password" />
    </div>
    <div class="field">
      <label class="p-2">Permission:</label>
      <p-dropdown [options]="permissionOptions" [(ngModel)]="selectedPermission" optionLabel="name"></p-dropdown>
    </div>
    <div class="field">
      <label class="p-2">UserName:</label>
      <input type="text" pInputText [(ngModel)]="UserName" />
    </div>
    <div class="field">
      <label class="p-2">NickName:</label>
      <input type="text" pInputText [(ngModel)]="NickName" />
    </div>
    <div class="field">
      <label class="p-2">Gender:</label>
      <p-dropdown [options]="genderOptions" [(ngModel)]="selectedGender" optionLabel="name"></p-dropdown>
    </div>
    <div class="field">
      <label class="p-2">Birthday:</label>
      <p-calendar [(ngModel)]="Birthday" [showIcon]="true"></p-calendar>
    </div>
    <div class="field">
      <label class="p-2">Email:</label>
      <input type="text" pInputText [(ngModel)]="Email" />
    </div>
  </div>

UI參數宣告

userData: any;
  fileName: string | undefined;
  file:File | undefined;

  IdUser: string | undefined;
  Password: string | undefined;
  permissionOptions: Option[] = [{name: '使用者', code: 0}, {name: '管理者', code: 1}];
  selectedPermission: Option = {name: '使用者', code: 0};
  UserName: string | undefined;
  NickName: string | undefined;
  genderOptions: Option[] = [{name: '男', code: 0}, {name: '女', code: 1}];
  selectedGender: Option = {name: '男', code: 0};
  Birthday: string | undefined;
  Email: string | undefined;

使用者物件宣告

export class User {
  IdUser?: string;
  Password?: string;
  Permission?: number;
  UserName?: string;
  NickName?: string;
  Gender?: number;
  Birthday?: string;
  Email?: string;
  CreatedTime?: Date;
  UpdatedTime?: Date;
}