Hostbinding on component with attribute selector not working-CodePudding

The goal: I want to customize a component attribute from within a directive using @Hostbinding. The attribute name is disabled.

The problem: I'm getting this error:

Can't bind to 'disabled' since it isn't a known property of 'sd-form'.\n1. If 'sd-form' is an Angular component and it has 'disabled' input, then verify that it is part of this module.\n2. If 'sd-form' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. recognized, yet it's part of the component on which the directive is used.

This is my directive

@Directive({
  selector: '[sixDisableNotAutorized]'
})
export class NotAutorizedDisableDirective extends RxjsComponent implements AfterViewChecked {

  @Input('sixDisableNotAutorized')
  autority: AuthorityEnum;

  @HostBinding('disabled')
  disabledState: boolean;
  ...
}

this is my component:

@Component({
  selector: 'sd-form[radio-group], sd-form[radio-group-inline]',
  templateUrl: './form-radio-group.component.html',
  styleUrls: [
    './form-radio-group.component.scss',
  ],
  encapsulation: ViewEncapsulation.None
})
export class SdFormRadioGroupComponent extends CustomValueAccessorComponent<ISdFormComponentItem> implements ControlValueAccessor {

  currentValue: ISdFormComponentItem;

  @HostBinding('class.six__is-disabled')
  @Input()
  disabled = false;

  ...
}

this is the dom:

<sd-form radio-group
         formControlName="myForm"
         idField="myForm"
         nameField="myForm"
         [sixDisableNotAutorized]="'EDITION_BI_CHANTIER'">
</sd-form>

CodePudding user response：

change @HostBinding('disabled') to @HostBinding('attr.disabled')