display checkbox based on object response Angular

Question

I want to create dynamic checkbox based on object response,It should create multiple checkbox based on this response:

test.json

[  
  {  
   "header":{  
      "serviceId":"inquiry-service",
      "productCode":"JPJXXX",
      "transactionId":"cfad2ac7c16XXX"
   },
   "data":{  
      "items":[  
         {  
            "offenceType4":"",
            "permSpeed":"110",
            "actSpeed":"123",
            "itemAttributes":{  
               "attribute5":"",
               "attribute4":"VQ3XXX",
               "attribute7":"14.21.00",
               "attribute6":"2018-03-22",
               "attribute1":"XXXXX",
               "attribute3":"XXXXXX",
               "attribute2":"XXXXXX"
            },
            "offenceLoc":"XXXXXX",
            "itemNo":"1",
            "summonDate":"2018-04-02",
            "distCode":"XXXXXX",
            "summonType":"2",
            "hbtlOffndr":"N",
            "itemAmount":15000,
            "itemAttributesCount":7,
            "summonAmt":"150.00",
            "offenceType1":"48",
            "offenceCode1":"XXXXXX",
            "offenceType2":"",
            "offenceCode2":"",
            "offenceType3":"",
            "category":"4",
            "offenceCode3":"",
            "offenceCode4":"",
            "respCode":"XXXXXX"
         },
         {  
            "offenceType4":"",
            "permSpeed":"110",
            "actSpeed":"123",
            "itemAttributes":{  
               "attribute5":"",
               "attribute4":"XXXXXX",
               "attribute7":"10.13.31",
               "attribute6":"2018-06-16",
               "attribute1":"XXXXXX",
               "attribute3":"XXXXXX",
               "attribute2":"XXXXXX"
            },
            "offenceLoc":"XXXXXX",
            "itemNo":"2",
            "summonDate":"2018-07-23",
            "distCode":"XXXXXX",
            "summonType":"2",
            "hbtlOffndr":"N",
            "itemAmount":15000,
            "itemAttributesCount":7,
            "summonAmt":"150.00",
            "offenceType1":"48",
            "offenceCode1":"XXXXXX",
            "offenceType2":"",
            "offenceCode2":"",
            "offenceType3":"",
            "category":"4",
            "offenceCode3":"",
            "offenceCode4":"",
            "respCode":"XXXXXX"
         }
      ],
      "status":{  
         "code":"",
         "message":""
      },
      "additionalProperties":{  
         "serviceFee":0,
         "total":0,
         "deliveryFee":0,
         "foreignCardSurcharge":0,
         "serviceFeeTax":0,
         "subTotal":0,
         "deliveryFeeTax":0
      },
      "metadata":{  
         "count":2
      }
   },
   "status":{  
      "code":"200",
      "message":"OK"
   }
}
]

what I want is checkbox to be created based on data.items if items consist of 2 arrays, it should create 2 checkboxes.then selected checkboxes can be submit and it need header.transactionId, if I filter and only got data.items how could I add header.transactionId when submit.

I had created demo stackblitz and this is what I had tried:

Ts File

  receivedSummons: SummonModel[];
  selectedSummon: string;
  form: FormGroup;

  constructor(
    private inquiryStore: InquiryStoreService,
    private formBuilder: FormBuilder
  ) {
    this.form = this.formBuilder.group({
      receivedSummons: new FormArray([], minSelectedCheckboxes(1))
    });
   }

  ngOnInit() {
    this.getReceivedSummons();
  }

  getReceivedSummons() {
      this.inquiryStore.summons$.subscribe(receivedSummons => {
      this.receivedSummons = receivedSummons;
      this.addCheckboxes();
    })
  }

  addCheckboxes() {
    this.receivedSummons.map((i) => {
      const control = new FormControl;
      (this.form.controls.receivedSummons as FormArray).push(control);
    });
  }

  submitSelectedCheckboxes() {
    this.selectedSummon = this.form.value.receivedSummons
      .map((v, i) => (v ? this.receivedSummons[i] : null))
      .filter(v => v !== null);
      console.log(this.selectedSummon)
  }

}

Html File

<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
  <label formArrayName="receivedSummons" *ngFor="let summon of form.controls.receivedSummons.controls; let i = index">
    <input type="checkbox" [formControlName]="i">
  </label>
  <div *ngIf="!form.valid">At least one order must be selected</div>
  <br>
  <button [disabled]="!form.valid">submit</button>
</form>

I could use some guidance and suggestion on how to solve this.

@nash11 but the code still there under inquiry-response folder — hafizi hamid
– hafizi hamid, Commented Sep 7, 2019 at 16:07
I'm not very clear on what you're trying to achieve here. In your demo, you have an input but no matter what you type in it, as long as it has any 4 numbers you can submit and you're just displaying the checkboxes. What exactly do you want the value of your checkbox to be? — nash11
– nash11, Commented Sep 7, 2019 at 17:34
after I put 4 number, then I got reponse obj, using behaviourSubject I send it to inquiry response, based on response obj data.items , I want to bind checkboxes, if data.items length = 2, there will be a 2 checkboxes — hafizi hamid
– hafizi hamid, Commented Sep 7, 2019 at 17:38
also I also need header.transactionId with checkboxes to send to another component — hafizi hamid
– hafizi hamid, Commented Sep 7, 2019 at 17:39

Iftifar Taz · Accepted Answer · 2019-09-08 15:23:20Z

First of all when using FormBuilder try not to instantiate FormControl or FormArray directly. Instead use FormBuilder to do so.

this.form = this.formBuilder.group({
    receivedSummons: this.formBuilder.array([])
});

As your response is an array you can get multiple receivedSummons which can contain multiple data.items. You need a different form structure to solve your issue.

Your addCheckboxes function might look like this.

addCheckboxes() {
    this.formReceivedSummons.setValue([]);
    this.receivedSummons.map(x => {
        const group = this.formBuilder.group({
            header: [x.header.transactionId],
            items: this.formBuilder.array([], [minSelectedCheckboxes(1)])
        });
        x.data.items.map(y => {
            (group.get('items') as FormArray).push(this.formBuilder.group({
                name: [y.itemNo],
                isChecked: ['']
            }));
        });
        this.formReceivedSummons.push(group);
    });
}

Also change the html file accordingly.

<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
    <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
        <ng-container [formGroup]="summon">
            <p>{{summon.value.header}}</p>
            <ng-container formArrayName="items" *ngFor="let item of formReceivedSummonsItems(i).controls; let j = index">
                <ng-container [formGroup]="item">
                    <input type="checkbox" formControlName="isChecked"> {{item.value.name}}
                </ng-container>
            </ng-container>
        </ng-container>
        <div *ngIf="!summon.valid">At least one order must be selected</div>
    </ng-container>
    <br>
    <button [disabled]="!form.valid">submit</button>
</form>

Here 2 getters were used to get the receivedSummons and items FormArray

get formReceivedSummons() {
    return this.form.get('receivedSummons') as FormArray;
}

formReceivedSummonsItems(i: number) {
    return (this.formReceivedSummons.controls[i].get('items')) as FormArray;
}

Here you can find the full demo.

Collectives™ on Stack Overflow

display checkbox based on object response Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related