Switch, Radio button not working


Topic: Switch, Radio button not working

Bibin Philip asked 6 years ago

Hi,

I installed the free version of MDB using npm into an Angular 7 app. I also installed the SASS loader. The controls are added to the "reactive" form using FormGroup & FormControl. I am facing the following issues:

1.Switch control: The checkbox appears but the CSS/style is not getting applied.

2.Radio button: The radio button remains disabled i.e. unable to click any ever, though there is no disable attribute applied. I have also set the validateSuccess/Error to false also but still it's not clickable.

3.Input control: The placeholder is not displaying the text. I have set it like:

placeholder="{{object.DisplayText}}"

It would be nice if you could guide me if there is any issue from my side and provide me an example with Reactive Form.

Thank you.


Arkadiusz Idzikowski staff answered 6 years ago

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">

Arkadiusz Idzikowski staff answered 6 years ago

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));
  }

Damian Gemza staff answered 6 years ago

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 :)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Desktop
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No