angular / angular/angular

Injected ngControl doesn't contain control property in Angular 9

Aperta
#35,330 11 commenti 35 reazioni 0 assegnatari Vedi su GitHub
area: forms P4
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.