Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DefaultValueAccessor directive should be usable in the hostDirectives array #48607

Open
mikeandtherest opened this issue Dec 29, 2022 · 1 comment · May be fixed by #55758
Open

DefaultValueAccessor directive should be usable in the hostDirectives array #48607

mikeandtherest opened this issue Dec 29, 2022 · 1 comment · May be fixed by #55758
Labels
area: forms core: host directives
Milestone
needsTriage

Comments

@mikeandtherest
Copy link

Which @angular/* package(s) are relevant/related to the feature request?

forms

Description

The DefaultValueAccessor directive is not standalone, which means that it cannot be currently used with the hostDirectives array of a component.
I have this scenario where it would be very handy for the ngDefaultControl directive to be applied on the host element from inside the component's class, leveraging the new hostDirectives array from Angular 15.

Desired code:

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
  hostDirectives: [DefaultValueAccessor]
})
export class InputComponent implements OnInit {

  @Input() formControlName!: string;

  group!: FormGroup;

  constructor(@Optional() private formGroupDirective: FormGroupDirective) {
  }

  ngOnInit(): void {
    this.group = this.formGroupDirective?.control;
  }

}

The code above throws the following build time error:

Error: src/app/shared/input/input.component.ts:8:20 - error NG2014: Host directive DefaultValueAccessor must be standalone

8   hostDirectives: [DefaultValueAccessor]
                     ~~~~~~~~~~~~~~~~~~~~
× Failed to compile.

Proposed solution

The DefaultValueAccessor directive should be available also as standalone, for the new Angular 15 approaches.

Alternatives considered

As a workaround, a custom component provider can make the "link" with the DefaultValueAccessor directive. But it's still better/easier to use the hostDirectives approach for this, since it is more explicative.

Current workaround:

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useClass: DefaultValueAccessor,
    multi: true
  }]
})
export class InputComponent implements OnInit {

  @Input() formControlName!: string;

  group!: FormGroup;

  constructor(@Optional() private formGroupDirective: FormGroupDirective) {
  }

  ngOnInit(): void {
    this.group = this.formGroupDirective?.control;
  }

}
@JeanMeche JeanMeche mentioned this issue Jan 1, 2023
Closed
2 tasks
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jan 1, 2023
@JeanMeche
feat(forms): make DefaultValueAccessor directive standalone
db0f1dc 
This commit make the DefaultValueAccessor directive standalone allowing it to be used as hostDirective

Fixes: angular#48607
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jan 1, 2023
@JeanMeche
feat(forms): make DefaultValueAccessor directive standalone
b0c6ba1 
This commit make the DefaultValueAccessor directive standalone allowing it to be used as hostDirective

Fixes: angular#48607
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jan 1, 2023
@JeanMeche
feat(forms): make DefaultValueAccessor directive standalone
9c63aba 
This commit make the DefaultValueAccessor directive standalone allowing it to be used as hostDirective

Fixes: angular#48607
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jan 2, 2023
@JeanMeche
feat(forms): make DefaultValueAccessor directive standalone
4f3f214 
This commit make the DefaultValueAccessor directive standalone allowing it to be used as hostDirective

Fixes: angular#48607
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jan 2, 2023
@JeanMeche
feat(forms): make DefaultValueAccessor directive standalone
687ae9b 
This commit make the DefaultValueAccessor directive standalone allowing it to be used as hostDirective

Fixes: angular#48607
JeanMeche added a commit to JeanMeche/angular that referenced this issue Jan 2, 2023
@JeanMeche
feat(forms): make DefaultValueAccessor directive standalone
0b62527 
This commit make the DefaultValueAccessor directive standalone allowing it to be used as hostDirective

Fixes: angular#48607
@ngbot ngbot bot added this to the needsTriage milestone Jan 4, 2023
@mikeandtherest
Copy link
Author

@dylhunn I saw the closing comment you've added to the PR created by @JeanMeche. Would you like this issue to be kept open for future reference, or close it and open a new one when time comes?

@rajsite rajsite mentioned this issue Feb 2, 2023
Closed
@pkozlowski-opensource pkozlowski-opensource removed the area: core Issues related to the framework runtime label Feb 8, 2023
@JeanMeche JeanMeche mentioned this issue Apr 6, 2023
Closed
This was referenced Apr 9, 2024
Open
Closed
JeanMeche added a commit to JeanMeche/angular that referenced this issue May 11, 2024
@JeanMeche
refactor(forms): make DefaultValueAccessor standalone
f28864b 
By make `DefaultValueAccessor` we'll allow developers to use as a host directive.

Fixes angular#48607
@JeanMeche JeanMeche linked a pull request May 11, 2024 that will close this issue
Draft
JeanMeche added a commit to JeanMeche/angular that referenced this issue May 11, 2024
@JeanMeche
refactor(forms): make DefaultValueAccessor standalone
bdc3159 
By make `DefaultValueAccessor` we'll allow developers to use as a host directive.

Fixes angular#48607
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: forms core: host directives
Projects
None yet
Milestone
needsTriage
2 participants
@pkozlowski-opensource @mikeandtherest