Two-way binding not work with non-null assertion operator #36551
Description
🐞 bug report
Affected Package
@angular/compiler-cli or @angular/compiler ?
Is this a regression?
No
Description
I enabled strictTemplates in my project and follow this guide to fix type errors.
But when I add a non-null assertion operator to the two-way binding value, the compilation result does not meet expectations.
🔬 Minimal Reproduction
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<input type="checkbox" [(ngModel)]="obj.value!">
<!-- ^^^^^^^^^ -->
`,
styleUrls: ['./app.component.less']
})
export class AppComponent {
obj: {
value?: boolean
} = {}
}🔥 Exception or Error
Expected
function AppComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "input", 0);
i0.ɵɵlistener("ngModelChange", function AppComponent_Template_input_ngModelChange_0_listener($event) {
return ctx.obj.value = $event;
// ^^^^^^^
});
i0.ɵɵelementEnd();
}
if (rf & 2) {
i0.ɵɵproperty("ngModel", ctx.obj.value);
}
}Actually
function AppComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "input", 0);
i0.ɵɵlistener("ngModelChange", function AppComponent_Template_input_ngModelChange_0_listener($event) {
return ctx.obj.value != $event;
// ^^^^^^^^^
});
i0.ɵɵelementEnd();
}
if (rf & 2) {
i0.ɵɵproperty("ngModel", ctx.obj.value);
}
}🌍 Your Environment
Angular Version:
Angular CLI: 9.1.1
Node: 12.16.1
OS: darwin x64
Angular: 9.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.901.1
@angular-devkit/build-angular 0.901.1
@angular-devkit/build-ng-packagr 0.901.1
@angular-devkit/build-optimizer 0.901.1
@angular-devkit/build-webpack 0.901.1
@angular-devkit/core 9.1.1
@angular-devkit/schematics 9.1.1
@angular/cdk 9.2.0
@ngtools/webpack 9.1.1
@schematics/angular 9.1.1
@schematics/update 0.901.1
ng-packagr 9.1.0
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0
Anything else relevant?
Current solution
<input type="checkbox" [(ngModel)]="!!obj.value">function AppComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "input", 0);
i0.ɵɵlistener("ngModelChange", function AppComponent_Template_input_ngModelChange_0_listener($event) {
return !!(ctx.obj.value = $event);
});
i0.ɵɵelementEnd();
}
if (rf & 2) {
i0.ɵɵproperty("ngModel", !!ctx.obj.value);
}
}or
<input type="checkbox" [(ngModel)]="$any(obj).value">or
<input type="checkbox" [ngModel]="obj.value!" (ngModelChange)="obj.value = $event">