[專案] 2021/01/26開發程式碼留存

 



 <!-- ------------------------以下為題目包選項版---------------------------------------------------- -->

  <mat-card *ngFor="let aa of this.KycQuestionObjlet i = index">
    <b class="kycTitle">{{ aa.qustNo }}</b>
    <b class="kycTitle">{{ aa.qustText }}</b>
    <!-- 單選 -->
    <div class="" *ngIf="aa.multiCheck === ''">
      <mat-radio-group aria-label="Select an option">
        <div
          class=""
          fxLayout="row wrap"
          fxLayoutGap="10px"
          fxLayoutAlign="start center"
        >
          <ng-container *ngFor="let cc of aa.answerListlet k = index">
            <mat-radio-button
              [value]="k + 1"
              (change)="KYCradioJSONChange($eventaak'sele1Note')"
            >
              <div
                class=""
                fxLayout="row wrap"
                fxLayoutGap="10px"
                fxLayoutAlign="start center"
              >
                <p>{{ cc.sele1Note }}</p>

                <div
                  class=""
                  fxLayout="row"
                  fxLayoutGap="10px"
                  fxLayoutAlign="start center"
                >
                  <ng-container *ngIf="cc.sele2Note">
                    <mat-form-field class="example-full-width">
                      <input
                        matInput
                        (input)="
                          KYCinputJSONChange(
                            $event.target.value,
                            aa,
                            k,
                            'sele2Note'
                          )
                        "
                      />
                    </mat-form-field>
                  </ng-container>
                  <p>{{ cc.sele2Note }}</p>
                </div>

                <div
                  class=""
                  fxLayout="row"
                  fxLayoutGap="10px"
                  fxLayoutAlign="start center"
                >
                  <mat-form-field
                    class="example-full-width"
                    *ngIf="cc.sele3Note"
                  >
                    <input
                      matInput
                      (input)="
                        KYCinputJSONChange(
                          $event.target.value,
                          aa,
                          k,
                          'sele3Note'
                        )
                      "
                    />
                  </mat-form-field>
                  <p>{{ cc.sele3Note }}</p>
                </div>
              </div>
            </mat-radio-button>
          </ng-container>
        </div>
      </mat-radio-group>
    </div>

    <!-- 複選 -->
    <div class="" *ngIf="aa.multiCheck === 'Y'">
      <section class="example-section">
        <div
          class=""
          fxLayout="row wrap"
          fxLayoutGap="10px"
          fxLayoutAlign="start center"
        >
          <mat-checkbox
            class="example-margin"
            *ngFor="let cc of aa.answerListlet k = index"
            (change)="KYCcheckboxJSONChange($eventaak'sele1Note')"
          >
            <div
              class=""
              fxLayout="row wrap"
              fxLayoutGap="10px"
              fxLayoutAlign="start center"
            >
              <p>{{ cc.sele1Note }}</p>

              <div
                class=""
                fxLayout="row"
                fxLayoutGap="10px"
                fxLayoutAlign="start center"
              >
                <mat-form-field class="example-full-width" *ngIf="cc.sele2Note">
                  <input
                    matInput
                    (input)="
                      KYCinputJSONChange(
                        $event.target.value,
                        aa,
                        k,
                        'sele2Note'
                      )
                    "
                  />
                </mat-form-field>
                <p>{{ cc.sele2Note }}</p>
              </div>

              <div
                class=""
                fxLayout="row"
                fxLayoutGap="10px"
                fxLayoutAlign="start center"
              >
                <mat-form-field class="example-full-width" *ngIf="cc.sele3Note">
                  <input
                    matInput
                    (input)="
                      KYCinputJSONChange(
                        $event.target.value,
                        aa,
                        k,
                        'sele3Note'
                      )
                    "
                  />
                </mat-form-field>
                <p>{{ cc.sele3Note }}</p>
              </div>
            </div>
          </mat-checkbox>
        </div>
      </section>
    </div>

    <!-- 單選內包複選 -->
  </mat-card>
  <!-- ------------------------以上為題目包選項版---------------------------------------------------- -->





  // radio單選
  KYCradioJSONChange(event: MatRadioChange, data, index, field) {
    // console.log('event', event);
    // console.log('data', data);

    const obj1 = this.KycQuestionObj.filter(x => x.qustNo === data.qustNo)[0];
    const inputValue = event.value;

    // console.log(this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo));

    if (field === 'sele1Note'{
      // 將上次選擇的其他單選的答案清除
      obj1.answerList.map(x => {
        x.ans1Text = '';
      });

      // 清除後再把值設定進去
      obj1.answerList[index].ans1Text = String(inputValue);
    }

    if (!this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo)) {
      this.finalJSONKYCArray.push(obj1);
    }
  }

  showOptions(event: MatCheckboxChange): void {
    console.log(event.checked);
  }

  // checkbox複選
  KYCcheckboxJSONChange(event: MatCheckboxChange, data, index, field) {
    // console.log('event', event);
    // console.log('data', data);

    const obj2 = this.KycQuestionObj.filter(x => x.qustNo === data.qustNo)[0];
    let inputValue;

    // 後端需求將true/false轉成0和1給他
    if (event.checked === true{
      inputValue = 1;
    } else if (event.checked === false{
      inputValue = 0;
    }

    // console.log(this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo));

    if (field === 'sele1Note'{
      obj2.answerList[index].ans1Text = String(inputValue);
    }

    if (!this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo)) {
      this.finalJSONKYCArray.push(obj2);
    }
  }

  // input框
  KYCinputJSONChange(event, data, index, field) {
    // console.log('event', event);
    // console.log('data', data);
    // console.log('index', index);

    const obj3 = this.KycQuestionObj.filter(x => x.qustNo === data.qustNo)[0];
    const inputValue = event;

    if (field === 'sele2Note'{
      obj3.answerList[index].ans2Text = inputValue;
    }

    if (field === 'sele3Note'{
      obj3.answerList[index].ans3Text = inputValue;
    }

    // console.log(this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo));

    if (!this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo)) {
      this.finalJSONKYCArray.push(obj3);
    }
  }

  // 開始送出資料
  sendKyc() {
    this.kyciDataService.sendKycData(this.finalJSONKYCArray);
  }














留言

這個網誌中的熱門文章

[Angular] 閒置登出作法

[Angular Materail] 檔案上傳範例

[Angular Material] 搜尋式下拉選單範例