Injected ngControl doesn't contain control property in Angular 9
- Lingua principale
- TypeScript
- Stelle
- 101k
- Fork
- 27.5k
- Merge medio
- 1g 19h
- PR unite (30g)
- 288
Descrizione
# 🐞 bug report
### Affected Package
`import { NgControl } from '@angular/forms';`
### Is this a regression?
I believe that this is an Ivy compiler issue
### Description
Injected `ngControl` doesn't contain `control` property in Angular 9.
## 🔬 Minimal Reproduction
```html
{{ 'User.Locked' | translate }}
```
This doesn't work:
```typescript
import { Directive, Input } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[opDisabled]'
})
export class DisabledDirective {
@Input()
set opDisabled(condition: boolean) {
const action = condition ? 'disable' : 'enable';
this.ngControl.control[action]();
}
constructor(private ngControl: NgControl) {}
}
```
This works:
```typescript
import { Directive, Input } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[opDisabled]'
})
export class DisabledDirective {
@Input()
set opDisabled(condition: boolean) {
const action = condition ? 'disable' : 'enable';
setTimeout(() => this.ngControl.control[action]());
}
constructor(private ngControl: NgControl) {}
}
```
## 🔥 Exception or Error
core.js:5828 ERROR TypeError: Cannot read property 'disable' of undefined
The `control` property is `undefined` and It looks like the it gets appended asynchronously to the injected `ngControl`, that's why the `setTimeout(() => {...})` workaround seems to work. Is this by design or is it a bug?
There is a similar issue reported [#32522](https://github.com/angular/angular/issues/32522), but locked due to inactivity, without any solutions mentioned in the comments.
## 🌍 Your Environment
**Angular Version:**
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.1
Node: 13.3.0
OS: darwin x64
Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.1
@angular-devkit/build-angular 0.900.1
@angular-devkit/build-optimizer 0.900.1
@angular-devkit/build-webpack 0.900.1
@angular-devkit/core 9.0.1
@angular-devkit/schematics 9.0.1
@angular/cli 9.0.1
@angular/flex-layout 9.0.0-beta.29
@ngtools/webpack 9.0.1
@schematics/angular 9.0.1
@schematics/update 0.900.1
rxjs 6.5.4
typescript 3.7.5
webpack 4.41.2
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia dal percorso di iniezione di NgControl e dal setter di DisabledDirective mostrato nella riproduzione minima, quindi riproduci il problema con Angular 9 e Ivy. Traccia quando la proprietà control diventa disponibile rispetto alla valutazione dell’input e confronta il comportamento con l’issue correlata #32522. Il lavoro è completo quando il comportamento temporale è confermato e corretto o documentato, con un test di regressione che copra la riproduzione.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 48/100