[Angular] 點兩下變為編輯狀態的方式

 

 <!-- 姓名 -->

      <div

        [ngStyle]="{ display: checkIsHaveValue('ebcI0010') ? 'block' : 'none' }"

      >

        <div

          class="ss:flex ss:flex-col ss:items-stretch ss:justify-center lg:flex lg:flex-row lg:flex-wrap lg:items-center lg:justify-start lg:gap-2"

        >

          <h3>姓名：</h3>

          <div>

            <h3

              [ngStyle]="{

                display: editable['editable0010'] ? 'none' : 'block'

              }"

              (dblclick)="toggleEdit('editable0010')"

            >

              {{ this.EditBciFormGroup.controls.ebcI0010.value }}

            </h3>

          </div>

          <mat-form-field

            appearance="outline"

            [ngStyle]="{ display: editable['editable0010'] ? 'block' : 'none' }"

          >

            <input

              matInput

              placeholder="姓名 "

              (keydown.enter)="$event.target.blur()"

              (blur)="toggleEdit('editable0010')"

              [readonly]="!editable['editable0010']"

              formControlName="ebcI0010"

              value="{{ this.EditBciFormGroup.controls.ebcI0010.value }}"

            />

            <mat-error *ngIf="this.EditBciFormGroup.get('ebcI0010')?.invalid"

              >{{ getErrorMessage('ebcI0010') }}

            </mat-error>

          </mat-form-field>

        </div>

      </div>

  editable = {

    editable0010: true,

    editable0020: true,

    editable0030: true,

    editable0040: true,

    editable0050: true,

    editable0060: true,

    editable0070: true,

    editable0080: true,

    editable0090: true,

    editable0100: true,

    editable0110: true,

    editable0120: true,

    editable0130: true,

    editable0140: true,

    editable0150: true,

    editable0160: true,

    editable0170: true,

    editable0180: true,

    editable0190: true,

  };

  /** 切換編輯 */

  toggleEdit(myId: string) {

    this.editable[myId] = !this.editable[myId];

  }

  // 控制只有顯示有資料的欄位

  checkIsHaveValue(myFormControlName: string) {

    // 有資料才顯示 或是 當編輯狀態為真的時候顯示，這樣就能當編輯狀態為空值時，還能顯示

    return (

      !!this.EditWmsFormGroup.controls[myFormControlName].value ||

      this.editable[`editable${myFormControlName.slice(-4)}`] === true

    );

  }

----------------以上的方法就可以了，下面只是測試----------------------------------

   <!-- 測試template -->

    <!-- <ng-container *ngFor="let myArray of this.formTextArray">

      <div

        class="ss:flex ss:flex-col ss:items-stretch ss:justify-center lg:flex lg:flex-row lg:flex-wrap lg:items-center lg:justify-start lg:gap-2"

      >

        <h3>{{ myArray.title }}</h3>

        <h3>{{ myArray.enableStringValue }}</h3>

        <h3

          *ngIf="!myArray.enableStringValue"

          (dblclick)="toggleEdit(myArray.enableString)"

        >

          {{ this.EditBciFormGroup.controls[myArray.formControlString].value }}

        </h3>

        <mat-form-field appearance="outline" *ngIf="myArray.enableStringValue">

          <input

            matInput

            #txtVal

            placeholder="{{ myArray.title }}"

            (keydown.enter)="$event.target.blur()"

            (blur)="toggleEdit(myArray.enableString)"

            [readonly]="!myArray.enableStringValue"

            formControlName="{{ myArray.formControlString }}"

            value="{{

              this.EditBciFormGroup.controls[myArray.formControlString].value

            }}"

          />

          <mat-error

            *ngIf="

              this.EditBciFormGroup.get(myArray.formControlString)?.invalid

            "

            >{{ getErrorMessage(myArray.formControlString) }}

          </mat-error>

        </mat-form-field>

      </div>

    </ng-container> -->

  formTextArray: textArray[] = [

    {

      title: 'TEEE傳真號碼變更：',

      formControlString: 'ebcI0010',

      enableString: 'editable0010',

      enableStringValue: this.editable['editable0010'],

    },

    {

      title: 'TEEE新增/變更集保帳號 ：',

      formControlString: 'ebcI0020',

      enableString: 'editable0020',

      enableStringValue: this.editable['editable0020'],

    },

  ];