Attributes not being applied when using FormControls

[efroim102]

I ran into this weird issue when trying to implement the jw-bootstrap-switch-ng2 bound to a FormControl using the new FormBuilder.

After importing the module and adding a bSwitch to the markup of my component, the switch showed up on the page, unfortunately when I tried to add attributes to customize it, they would have no effect whatsoever and it would default to the default values.

This is the markup that's finally working for me:

<div class="form-group">   
    <bSwitch 
        [switch-label-width]="auto" 
        [switch-label-text]="['Task View']" 
        [switch-on-text]="['GRID']" 
        [switch-off-text]="['LIST']"
        [switch-on-color]="['primary']"
        [switch-off-color]="['primary']"
        [formControl]="form.controls['view']" 
        (onChangeState)="view_change()"
        #view="ngForm">
    </bSwitch>
</div>

As you can see all string values have to be encapsulated by square brackets and single quotes which doesn't really make sense, I tried setting the custom values within the component and using a reference but that didn't make any difference.

The markup for my component is in a separate file, maybe that's the cause?

Thanks for the awesome component!

[JulioWar]

Thanks @efroim102. I made a form with formControl and I didn't have any problem. Maybe if you share the code of your component or the structure that you are using, I can help you.

But i will test it.

[efroim102]

This is the component:

...
@Component({
    templateUrl: './tasks-view.component.html',
    styleUrls: ['./tasks-view.component.css'],
    providers: [{
        provide: NgbDateParserFormatter,
        useFactory: () => new NgbCustomDateRangeParserFormatter("MM/DD/YYYY")
    }]
})

export class TasksViewComponent implements OnInit, OnDestroy {

    private form : FormGroup

    constructor(private _router: Router, private _route: ActivatedRoute, private _user_service: UserService, private _auth_service : AuthService, private _form_builder : FormBuilder) {

        this.form = this._form_builder.group( {
            user_id: [1],
            week: [{year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()} as NgbDateStruct],
            show_complete: [false],
            view: [true]
        })

    }

    view_change(){console.log('view change')}

    ngOnInit(){
        ...
    }

    ngOnDestroy(){
        ...
    }
}

[JulioWar]

Thanks for the code.

I test and nothing is wrong with bSiwtch. I don't know why you need to use ['LIST'] it's strange. I implementing something quickly here.

also you can test it using formControlName :

  <bSwitch
            formControlName="view"
            [switch-size]="'small'"
            [switch-on-text]="'Activo'"
            [switch-off-text]="'Inactivo'"
            [switch-on-color]="'success'"
            [switch-off-color]="'danger'"
          ></bSwitch>

[efroim102]

What's the reason for the double and single quotes to set the value?

[JulioWar]

because the property needs to be a string.

[JulioWar]

@efroim102 let me know when you solve the problem.

[efroim102]

I mentioned when opening the issue that I found a workaround which turns out is not a workaround but how it's supposed to be, I found it weird to have to use double quotes and single quotes for an attribute value, I've never seen that before, usually you just pass a regular string if a string value is required.

[JulioWar]

If you don't want to use double quotes and single quotes, you can set the property like this:

  <bSwitch
            switch-off-color="danger"
          ></bSwitch>

[efroim102]

That makes sense! I should have realized that when enclosing an attribute name with [] the value needs to be an expression... In my defense I couldn't find any examples where the values were hard-coded...

[JulioWar]

Good... feel free to close this issue if you resolve it.

[yolixtly]

because the property needs to be a string.

Direct Link for the type accepted by each of the available attributes