Optional attribute binding

I'm building a custom checkbox component that wraps a real input and makes it look stylish.

One requirement for my custom checkbox is being able to bind an optional name so that the checkbox can be submitted as part of a form.

@Component({
    selector: 'my-checkbox'
    template: `
    <input type="checkbox" [name]="name">
    `
    /*, ...etc */
})
export class MyCheckbox implements ControlValueAccessor {
    @Input() name: string;

    // ...etc
}

Usage:

<!-- named-->
<my-checkbox [(ngModel)]="vm" name="coolcool"></my-checkbox>

<!-- unnamed-->
<my-checkbox [(ngModel)]="vm"></my-checkbox>

The output of the named example looks just fine

<!-- named output -->
<my-checkbox>
    <input type="checkbox" name="coolcool">
</my-checkbox>

...but the output of the unnamed example also has a name attribute?!

<!-- unnamed output -->
<my-checkbox>
    <input type="checkbox" name="undefined">
</my-checkbox>

How do I make name="undefined" go away?