Angular 4 Dynamic Forms: Dependent Dropdown

Question

I am creating a dynamic form based on Angular 4 Dynamic Forms .

Everything is working out great! However, I have run into an issue with the dropdown. I would like to have a dependent dropdown. When the user selects a value in the dropdown it will display checkboxes, based on an attribute - possibly name.

service

  new DropdownInput({
    key: 'dropdown',
    label: 'Dropdown Testing',
    options: [
      {key: 'example1',  value: 'Example 1'},
      {key: 'example2',  value: 'Example 2'}
    ],
    order: 1
  }),

  new CheckboxInput({
    key: 'checkbox1',
    label: 'checkbox1 - example1',
    name: 'example1',
    order: 2
  }),

  new CheckboxInput({
    key: 'checkbox2',
    label: 'checkbox2 - example1',
    name: 'example1',
    order: 3
  }),

  new CheckboxInput({
    key: 'checkbox3',
    label: 'checkbox3 - example2',
    name: 'example2',
    order: 4
  }),

  new CheckboxInput({
    key: 'checkbox4',
    label: 'checkbox4 - example2',
    name: 'example2',
    order: 5
  })

html

<!-- CHECKBOX -->

<div class="col-xs-12" *ngSwitchCase="'checkbox'">

  <input class="form-check-input"
         type="checkbox"
         [formControlName]="input.key"
         [id]="input.key"
         [name]="input.name">

  <label class="control-label"
         [attr.for]="input.key">{{input.label}}</label>
  <a class="info-tooltip"><i class="fa fa-question-circle" aria-hidden="true"></i></a>

  <span class="help-block"
        *ngIf="!isValid">{{inputError}}</span>

</div>

<!-- DROPDOWN -->

<div class="col-xs-12" *ngSwitchCase="'dropdown'">

  <label class="control-label"
         [attr.for]="input.key">{{input.label}}</label>
  <a class="info-tooltip"><i class="fa fa-question-circle" aria-hidden="true"></i></a>

  <span class="help-block"
        *ngIf="!isValid">{{inputError}}</span>

  <select [id]="input.key"
          [formControlName]="input.key">
    <option *ngFor="let opt of input.options"
            [value]="opt.key">{{opt.value}}</option>
  </select>

</div>

So in this example if a user were to click on Example 1 - I would only like to display checkboxes 1 & 2. Is this possible? Should I be formatting the data differently?

Note 1: I have found the link on how to go from a dependent dropdown to another dropdown (Angular 2 Dynamic Forms: How to create dependent dropdown ), but do not know how to effectively use it with checkboxes.

Note 2: The reason I have my checkbox separate from textbox (not shown) is how they are displayed visually in the app. I know I could combine them for less/more efficient code.

yurzui · Accepted Answer · 2018-01-17 07:14:39Z

4

I would add one option called showWhen to base model:

base.model.ts

export class BaseModel<T> {
  value: T;
  key: string;
  label: string;
  required: boolean;
  order: number;
  controlType: string;
  showWhen: ControlCondition; <===================== new option

  constructor(options: {
    value?: T,
    key?: string,
    label?: string,
    required?: boolean,
    order?: number,
    controlType?: string,
    showWhen?: ControlCondition
  } = {}) {
    this.value = options.value;
    this.key = options.key || '';
    this.label = options.label || '';
    this.required = !!options.required;
    this.showWhen = options.showWhen;
    this.order = options.order === undefined ? 1 : options.order;
    this.controlType = options.controlType || '';
  }
}

export class ControlCondition {
  key: string;
  value: string;
}

As you can see it takes key and value. Depending on these values we can decide whether to show control or not.

Now you can describe condition for showing your controls like:

new DropdownInput({
  key: 'dropdown',
  label: 'Dropdown Testing',
  options: [
    { key: 'example1', value: 'Example 1' },
    { key: 'example2', value: 'Example 2' }
  ],
  order: 1
}),

new CheckboxInput({
  key: 'checkbox1',
  label: 'checkbox1 - example1',
  showWhen: {
    key: 'dropdown',   // if control with key `dropdown` has value `example 1` then show
    value: 'example1',
  },
  order: 2
}),

Now go to the component that is called DynamicFormQuestionComponent in angular tutorial. In my example I called it DynamicFormComponent. Here we need to add logic for showing/hidding control:

dynamic-form.component.ts

export class DynamicFormComponent implements OnInit, OnDestroy {
  @Input() input: BaseModel<any>;
  @Input() form: FormGroup;

  control: FormControl;

  hidden: boolean;

  subscription: Subscription;

  ngOnInit() {
    this.control = this.form.get(this.input.key) as FormControl;
    this.setUpConditions();
  }

  setUpConditions() {
    if (!this.input.showWhen) {
      return;
    }

    let relatedControl = this.form.get(this.input.showWhen.key);
    if (!relatedControl) {
      return;
    }

    this.updateHidden();
    this.subscription = relatedControl.valueChanges.subscribe(x => this.updateHidden());
  }

  updateHidden(): void {
    let relatedControl = this.form.get(this.input.showWhen.key);
    this.hidden = relatedControl.value !== this.input.showWhen.value;

    this.hidden ? this.control.disable() : this.control.enable();
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

and last thing you need to do is to add *ngIf="!hidden" in template

Ng-run Example

edited Jan 17, 2018 at 7:14

answered Jan 16, 2018 at 21:56

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JessySue Over a year ago

Thanks! I have a rather odd request. But when I send the data to the server I need to have the data from all the checkboxes sending. For example, let’s say the user has clicked on example 2 in the dropdown and clicked on checkbox 3 only (and not checked, then unchecked). The data reads: dropdown: example2, checkbox3: true, but I would like for the data to read: dropdown: example2, checkbox1: false, checkbox2: false, checkbox3: true, checkbox4: false. Is that possible?

yurzui Over a year ago

There is a line this.hidden ? this.control.disable() : this.control.enable(); that is reponsible for that. You can also read getRawValue from formGroup. I've update example

yurzui Over a year ago

You can also call reset method value if this.hidden is true

Collectives™ on Stack Overflow

Angular 4 Dynamic Forms: Dependent Dropdown

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related