Kendo-angular: [Bug] Switch Component: Change state programmatically

Created on 7 Apr 2018  路  2Comments  路  Source: telerik/kendo-angular

I'm submitting a...

  • Bug report

Current behavior

In order to change the state of switch Component programmatically, I considered the following four choices
1.

@Component({
    selector: 'my-app',
    template: `
        <kendo-switch
          [(ngModel)]="checked"
        ></kendo-switch>
    `
})

class AppComponent {
    public checked: boolean = true;
}

doesn't work if is nested inside

<div [formGroup]="someForm">...</div

2.

 <kendo-switch [checked]="false"></kendo-switch>

```typescript
public checked: boolean = true;
// and then toggle the checked variable
}


3. 
```typescript
this.kendoSwitchComponent.changeValue(false)

doesn't drag switch to either side

  1. Hack
      const spaceKey = new KeyboardEvent('keydown', {
        keyCode: '32'
      });
      return this.kendoSwitchComponent.keyDown(spaceKey);

Expected behavior

On Changing the value programmatically, Switch toggle doesn't slide but does change the state

Minimal reproduction of the problem with instructions

Plunker: https://plnkr.co/edit/IoB0sLXCM3fpziYDIrPC?p=preview

Environment

Package versions:

> npm ls --depth 0
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
Bug inputs

All 2 comments

The problem with the checked property binding should be fixed in the latest dev version:
https://plnkr.co/edit/0uBNcy3enddUfpgsntmv?p=preview

I am not sure if I understand the issue with ngModel but you will get an error for any input if you nest ngModel inside formGroup:
https://plnkr.co/edit/DxMu0tmNMSVPA8m91HTX?p=preview
In general, template and reactive forms should not be mixed.

changeValue and keyDown are internal methods and should not be used.

Fixed in v3.0.0

Was this page helpful?
0 / 5 - 0 ratings