[Angular] 全擴充題目選項寫法2

-

 




HTML



<p>KYC題目JSON</p>
<mat-card *ngFor="let aa of this.KycQuestionObj3; let i = index">
  <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"
      >
        <mat-radio-button
          *ngFor="let cc of aa.answerList; let k = index"
          [value]="cc.score"
          (change)="KYCradioJSONChange($event, aa, k, '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-radio-button>
      </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.answerList; let k = index"
          [value]="cc.score"
          (change)="KYCcheckboxJSONChange($event, aa, k, 'sele1Note')"
        >
          <!-- (change)="showOptions($event)" -->
          <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>

<b>KYC Array</b>
<pre>
  {{ finalJSONKYCArray | json }}
</pre>


TS檔


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

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

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

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

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

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

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

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

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

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

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

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

    const obj3 = this.questionJson3.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);
    }
  }


JSON


 questionJson3 = [
  {
      id: '1',
      version: '1',
      itemNo: '2',
      qustNo: '6',
      qustText: '不動產：（扣除貸款後不動產價值）',
      multiCheck: '',
      scoreAmt: 0,
      answerList: [
        {
          ansNo: '1',
          sele1Note: '無',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '2',
          sele1Note: '小於500萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '3',
          sele1Note: '500~999萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '4',
          sele1Note: '1000~2999萬',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '5',
          sele1Note: '3000~4999萬',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '6',
          sele1Note: '5000-9999萬',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '7',
          sele1Note: '1億元以上',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '8',
          sele1Note: '同戶籍',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '9',
          sele1Note: '同通訊',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '10',
          sele1Note: '其他((需填地址地號):',
          sele2Note: ')',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '11',
          sele1Note: '(請詳填不動產價值:',
          sele2Note: ')',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
      ],
    },
    {
      id: '1',
      version: '1',
      itemNo: '2',
      qustNo: '7',
      qustText: '其他資產',
      multiCheck: '',
      scoreAmt: 0,
      answerList: [
        {
          ansNo: '1',
          sele1Note: '銀行平均存款NT$',
          sele2Note: '萬元',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '2',
          sele1Note: '其他:',
          sele2Note: 'NT$',
          sele3Note: '萬元',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '3',
          sele1Note: '無貸款',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '4',
          sele1Note: '有貸款(房貸以外):',
          sele2Note: 'NT$',
          sele3Note: '萬元',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
      ],
    },
    {
      id: '1',
      version: '1',
      itemNo: '2',
      qustNo: '8',
      qustText: '資產淨值',
      multiCheck: '',
      scoreAmt: 0,
      answerList: [
        {
          ansNo: '1',
          sele1Note: '100萬元以下',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '2',
          sele1Note: '100~300萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '3',
          sele1Note: '300~500萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '4',
          sele1Note: '500~1000萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '5',
          sele1Note: '1000萬以上',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '6',
          sele1Note: '請詳填',
          sele2Note: '萬元',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
      ],
    },
    {
      id: '1',
      version: '1',
      itemNo: '2',
      qustNo: '9',
      qustText: '資產總值',
      multiCheck: '',
      scoreAmt: 0,
      answerList: [
        {
          ansNo: '1',
          sele1Note: '少於300萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '2',
          sele1Note: '300∼499萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '3',
          sele1Note: '500∼999萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '4',
          sele1Note: '1000~1499萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '5',
          sele1Note: '1500~2999萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '6',
          sele1Note: '3000~4999萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '7',
          sele1Note: '5000-9999萬元',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
        {
          ansNo: '8',
          sele1Note: '1億元以上',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 0,
        },
      ],
    },
     {
      id: '1',
      version: '1',
      itemNo: '2',
      qustNo: '11',
      qustText: '投資資金來源（可複選）',
      multiCheck: 'Y',
      scoreAmt: 0,
      answerList: [
        {
          ansNo: '1',
          sele1Note: '薪水/固定收入',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 2,
        },
        {
          ansNo: '2',
          sele1Note: '退休金',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 1,
        },
        {
          ansNo: '3',
          sele1Note: '閒置資金',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 5,
        },
        {
          ansNo: '4',
          sele1Note: '投資收益',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 4,
        },
        {
          ansNo: '5',
          sele1Note: '其他基金公司轉入',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 4,
        },
        {
          ansNo: '6',
          sele1Note: '部分借貸',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 1,
        },
        {
          ansNo: '7',
          sele1Note: '親友聚資',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 3,
        },
        {
          ansNo: '8',
          sele1Note: '公司資金',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 1,
        },
        {
          ansNo: '9',
          sele1Note: '其他',
          sele2Note: '',
          sele3Note: '',
          ans1Text: '',
          ans2Text: '',
          ans3Text: '',
          score: 3,
        },
      ],
    },
  ],






















留言

張貼留言

這個網誌中的熱門文章

[Angular] 閒置登出作法

-
app.componemt.ts 偵測事件    //  如自動登出功能有bug 則停用以下--------    @ HostListener ( ' window:keyup ' ,  [])    @ HostListener ( ' window:click ' ,  [])    @ HostListener ( ' window:wheel ' ,  [])    @ HostListener ( ' window:mousemove ' ,  [])    resetTimer ()   {      this . authService . notifyUserAction () ;    } authService export   class   AuthService   {    isLoggedIn   =   false ;    //  ! 閒置登出時間請更改這參數的數字    endtimeSet   =   30 ;    //  這邊讓單位變成分鐘秒    endTime   =   this . endtimeSet   *   60 ;    //  store the URL so we can redirect after logging in    redirectUrl :   string ;    constructor ( private   router :   Router )   {}    //  偵...
閱讀完整內容

[Angular Materail] 檔案上傳範例

-
  範例 https://stackblitz.com/edit/angular-material-file-input-with-form-field?file=src%2Fapp%2Fapp.component.ts 來源 https://forum.angular.tw/t/topic/1972/5 html < mat-card >    < p   mat-card-title > Test file input with form field </ p >    < mat-divider ></ mat-divider >    < mat-card-content >      < br >< br >      < hello  [ name ] = "name" ></ hello >      < mat-form-field   style = "width: 100%;" >        < mat-label > File matInput </ mat-label >        < button   mat-icon-button   matPrefix  ( click ) = "f_input.click()" >          < mat-icon > attach_file </ mat-icon >        </ button >  ...
閱讀完整內容

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

-
  範例 https://stackblitz.com/edit/filter-select 來源 https://forum.angular.tw/t/topic/1722/4 HTML < mat-card >    < p   mat-card-title > Angular Material Select With Filter </ p >    < mat-divider ></ mat-divider >    < mat-card-content >      < br >< br >      < mat-form-field   style = "width: 100%;" >        < mat-label > Pick a language </ mat-label >        < mat-select  [ formControl ] = "control" >          < mat-option   disabled >            < input   type = "text"   matInput  [ formControl ] = "filter"   placeholder = "Filter..." >          </ mat-option > ...
閱讀完整內容