Components: MatFormField guide disabled incomplete

[cubidobusinesssolutions]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

Working MatFormField guide

What is the current behavior?

disabled state not working

What are the steps to reproduce?

Implement a custom MatFormfield via Creating a custom form field control

Is there anything else we should know?

Please add the following snippet to Creating a custom form field control#ngControl

// implements ControlValueAccessor.setDisabledState
setDisabledState(isDisabled: boolean): void {
  this.disabled = isDisabled;
}

[merlosy]

I personnally use the code below:

constructor(private _elementRef: ElementRef, private _renderer: Renderer2 ) {}

setDisabledState(isDisabled: boolean): void {
    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}

Is it any better or worse?

[pfeigl]

I think the right way to do this is adding the following into the disabled setter:

    if(this._disabled) {
      this.parts.controls.area.disable();
      this.parts.controls.exchange.disable();
      this.parts.controls.subscriber.disable();
    } else {
      this.parts.controls.area.enable();
      this.parts.controls.exchange.enable();
      this.parts.controls.subscriber.enable();
    }

I'll see whether I find the time to send a PR for this the next days

[rsaenen]

There is a documentation issue:
https://material.angular.io/guide/creating-a-custom-form-field-control#-code-disabled-code-

As using disabled with a reactive form throws a warning.

I think the right way to do this is adding the following into the disabled setter:

if(this._disabled) {
  this.parts.controls.area.disable();
  this.parts.controls.exchange.disable();
  this.parts.controls.subscriber.disable();
} else {
  this.parts.controls.area.enable();
  this.parts.controls.exchange.enable();
  this.parts.controls.subscriber.enable();
}

I'll see whether I find the time to send a PR for this the next days

I guess disable the form is better:

if (this.disabled) {
  this.form.disable();
} else {
  this.form.enable();
}

[dariobraun]

Is this still an issue? If there is a consensus on what would be the best way to fix this I'd like to give it a try!

[cubidobusinesssolutions]

@merlosy

Is it any better or worse?

This is what you intended, I guess:

// implements ControlValueAccessor.setDisabledState
setDisabledState(isDisabled: boolean): void {
  this.disabled = isDisabled;
}
// implements MatFormFieldControl<T>.disabled
set disabled(dis) {
  this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', dis);
  ...
}

[cubidobusinesssolutions]

@dariobraun

Is this still an issue?

Yes and no.

Since we haven't set up our component to act as a ControlValueAccessor

The bug doesn't apply anymore, as the Documentation explicitly states that this is not documented.

For additional information about ControlValueAccessor see the API docs.

It would be nice to have a complete documentation here, e.g. have a link to a complete working example implementing both MatFormFieldControl and ControlValueAccessor.

I changed description to proposal accordingly.