Angular2 - Material2 - Custom Checkbox

Question

I'm working on creating a custom checkbox based on the angular material2 project. Everything seems to be working at first but when I update model values in code, the checkbox does not un-check even though angular registers the change. See the plunker for a demo.

The relevant code to update the model values is:

private _parentValue:bool = false;
get parentValue()
{
    return this._parentValue;
}
set parentValue(val)
{
    this._parentValue = coerceBooleanProperty(val);

    this.value1 = this._parentValue;
    this.value2 = this._parentValue;
    this.value3 = this._parentValue;
}

I apologize in advance if I have done something incorrect here as this is my first time posting to stack overflow.

yurzui · Accepted Answer · 2017-05-31 06:07:38Z

2

I would rewrite writeValue method as follows:

writeValue(value: T) {
    if (isDefined(value)) {
        this._value = value;
    }
}

where isDefined is a function like

export function isDefined(val: any): boolean {
  return val !== null && val !== undefined;
}

This way your control can consume false value

Forked Plunker

answered May 31, 2017 at 6:07

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

S. Rasmussen Over a year ago

Wow! That was it. I was under the impression that the 'writeValue' method was only used for setting the initial value of the control. Thanks!

Collectives™ on Stack Overflow

Angular2 - Material2 - Custom Checkbox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related