Angular Dynamic Form View From JSON Data With Nested Condition

I am trying to make dynamic forms with Json data and the conditions should be selected from the options type selection from the JSON data. The JSON data structure are as follow. In

Solution 1:

Since you don't have much in your code. You need to do more work. I will just give you recommendations on what to do.

check reactive forms or template driven forms. I recommend reactive forms.

than actually you can transfer your form to reactive forms.

form_template = [{
    "type": "select",
    "label": "Spedition",
    "options": [
      {
        "value": "sped1",
        "label": "Adrian Speditions GmbH",
        "subfield": {
          "type": "select",
          "label": "Subfield1",
          "options": [
            {
              "value": "subfieldvalue1",
              "label": "101"
            },
          ]
        }
      },
      {
        "value": "sped2",
        "label": "Alfred Schuon GmbH"
      }
    ]
  }]

reactive form would look something like:

reactiveForm: FormGroup;

this.reactiveForm = new FormGroup({
  type: new FormControl('select'),
  label: new FormControl('Spedition'),
  options: new FormArray([
    new FormGroup({
      value: new FormControl('sped1'),
      label: new FormControl('Adrian Speditions GmbH'),
      subfield: new FormGroup({
        type: new FormControl('select'),
        label: new FormControl('Subfield1'),
        options: new FormArray([
          new FormGroup({
            value: new FormControl('subfieldvalue1'),
            label: new FormControl('101')
          })
        ])
      })
    })
  ])
});

you access and change values in TS like this.

this.reactiveForm.get('options').at(indexOfArray).get('value').setValue('Your New Value');

since you want to a use select. here is example from angular material webpage using reactive forms. Check: https://material.angular.io/components/select/examples also here is my dynamic forms qustion it also might help.

<h4>mat select</h4>
<mat-form-field>
  <mat-label>Favorite animal</mat-label>
  <mat-select [formControl]="animalControl" required>
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
  <mat-hint>{{animalControl.value?.sound}}</mat-hint>
</mat-form-field>

to bind select to form you need to specify which formArray, formgroup and formControl you are binding in html.

In this case formControl is animalControl. but for you it will probably by labe or type. but you also need to specify which formGroup or FormArray they are in.

after setting all forms up. you can us *ngIf to check if formvalue is empty. If not you can show you next select. this Is all I can help.

nested custom FormArray component doesn't bind with child form with FormArrayName

you can also use formbuilder and add validators. you just need to do more reasearch on reactive forms for now.

Good luck!