Switch, Radio button not working

Could you provide the code you use to render those components? There are two versions in our documentation - default and material. The second one is available only in MDB Angular Pro version.

Please make sure you imported ReactiveFormsModule in your module file.

Hi, I have the rest of the controls working fine like checkbox, dropdown, etc. I have enclosed these controls within -

<ng-container [formGroup]="FormName"></ng-container>

1.Switch control:

<label class="bs-switch" *ngFor="let option of Options;" formGroupName="{{Key}}">
    <input type="checkbox" checked="{{(option.selected||false)?'checked':null}}" formControlName="{{option.key}}" color="primary">
    <span class="slider round"></span>{{option.text}}
  </label>

2.Radio button:

 <div *ngFor="let option of FormField.Options; let count = index;" class="custom-control custom-radio">
    <input mdbInputDirective type="radio" formControlName="{{ControlName}}" name="{{ControlName}}" id="{{count}}" [value]="option.key"
       class="custom-control-input" [validateSuccess]="false" [validateError]="false">
    <label class="custom-control-label" for="">{{option.text}}</label>
  </div>

3.Input control:

<input mdbInputDirective placeholder="{{PlaceHolder}}" type="text" name="{{ControlName}}" formControlName="{{ControlName}}"
    autocomplete="off" [validateSuccess]="false" [validateError]="false" class="form-control">

Hello,

If it's possible please update to version 7.4.0 and use the new syntax for default bootstrap switch. For radio buttons formControlName must be the same in every button (and if you use name attribute, the name and formControlName must have the same value). We will take a closer look at the problem with placeholder. Here is a working example:

HTML:

<ng-container [formGroup]="testForm">
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitches" formControlName="switchControl">
    <label class="custom-control-label" for="customSwitches">Toggle this switch element</label>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="defaultUnchecked" value="blue" formControlName="radioControl"
      mdbInputDirective [validateSuccess]="false" [validateError]="false">
    <label class="custom-control-label" for="defaultUnchecked">Blue</label>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="defaultChecked" value="red" formControlName="radioControl"
      mdbInputDirective [validateSuccess]="false" [validateError]="false">
    <label class="custom-control-label" for="defaultChecked">Red</label>
  </div>

  <div class="md-form"><input mdbInputDirective type="text" formControlName="inputControl" autocomplete="off"
      [validateSuccess]="false" [validateError]="false" class="form-control"></div>
</ng-container>

TS:

 testForm: FormGroup;

  ngOnInit() {
    this.testForm = new FormGroup({
      switchControl: new FormControl(),
      radioControl: new FormControl('blue'),
      inputControl: new FormControl()
    });

    this.testForm.valueChanges.subscribe( values => console.log(values));
  }

Dear Philip,

I have checked the problem with dynamic placeholder.

This will be resolved with the next version of MDB Angular. Until this, you can use the below workaround:

Add the [attr.placeholder]="placeHolder" attribute binding to set the placeholder value dynamically.

Best Regards,

Damian

Thank you Arkadiusz & Damian.

After updating to version 7.4.0 and following your suggestions, the controls are working properly now.

Thanks again :)