[Angular Material] 使用JSON格式動態產生的單選複選選項，該如何讀出JSON時把值顯示在畫面上

General
1

我現在有一個根據JSON檔案，ngFor出來的動態內容

已經可以順利讀出來和存入整個JSON

但是卡在如何把值設定到畫面上的部分

再麻煩各位大神了，感謝

HTML

<ng-container *ngFor="let aa of this.KycQuestionObj; let i = index">
     <mat-radio-group aria-label="Select an option">
        <ng-container *ngFor="let cc of aa.counterkycs; let k = index">         
            <mat-radio-button
              [value]="k + 1"                
              (change)="KYCradioJSONChange($event, cc, k, 'sele1Note')"
            >
              <div>
                <p>{{ cc.sele1Note }}</p>                 
              </div>
            </mat-radio-button>
          </ng-container>
      </mat-radio-group>

JSON結構如下

答案存放在
"ans1Text"的欄位

{
  "message": "string",
  "isSuccess": true,
    "counterKyc1Data": {
       "idno": "string",
       "openbranchcode": "string",   
           "counterkycq": [
                {
                 "id": 0,
                  "itemNo": "string",
                  "qustNo": "string",
                  "qustText": "string",
                  "multiCheck": "string",
                  "scoreAmt": 0,
           "counterkycs": [
               {
                 "id": 0,          
                 "itemNo": "string",
                 "qustNo": "string",
                 "ansNo": "string",
                 "aGupNo": "string",
                 "aMulti": "string",
                 "sele1Note": "string",           
                 "ans1Text": "string",        
                 "score": 0,      
                }
    ],
    "createdBy": "string",
    "createdDate": "2021-02-17T02:07:37.603Z",
    "updatedBy": "string",
    "updatedDate": "2021-02-17T02:07:37.603Z"
    }
  ]
 }
}
2

我自己不知道這樣對不對

我直接在

   <mat-radio-button
       [value]="k + 1"                
       (change)="KYCradioJSONChange($event, cc, k, 'sele1Note')"
        >

中加上這行

  [checked]="cc.ans1Text !== ' ' "

就出現了，但是不知道是不是正確的寫法

3

Radio button | Angular Material

應該要在radio group中附上一個 NgModel 或是 FormControl
來讓選擇後的值可以對應到一個變數上
若是FormControl可監聽ValueChanges來做些處理

4

這點我也在想
因為過去我 reactive form的方式是先設定好formControlName，然後串接service.ts中的formgroup

 <mat-radio-group
            formControlName="fuT0010">
            <mat-radio-button value="a1">同意申請</mat-radio-button>
            <mat-radio-button value="a2">不同意申請</mat-radio-button>                
          </mat-radio-group>

TS

  FUTClientSideFormGroup: FormGroup = this.formDataService.serviceFormGroup.get(
'fut',
 ) as FormGroup;

那
現在用動態產生的，
如果在JSON格式中新設定一個欄位
假設叫做myControlNo，裡面比照reactive form的formConrol 命名方式

 <mat-radio-group          
        [(ngModel)]="aa.myControlNo"
      >

這樣是不是就可以做到
在動態產生的元件上，也可以像reactive form一樣設定validator 之類的東西
或是也能去個別設定 ??

5

那就要foreach json中的欄位名稱來產生form group … ?

6

我找到類似的，不知道是不是這樣解比較好

7

Hi 我又來回舊文了

最近我也在寫 form 的元件 突然想到這篇

這邊有個自己寫的module 給你看看是不是你要的那種方式，以設定來顯示form

Angular Configurable Form

2個讚